/* ============================================================
   SYNTHESYX LABORATORIES
   Light-first system. Ink is punctuation, not the ground.
   ============================================================ */

:root{
  --ink:        #0D1220;
  --ink-2:      #151C2E;
  --ink-3:      #232D45;
  --paper:      #FFFFFF;
  --mist:       #F3F4FC;
  --mist-2:     #E9EBF9;
  --rule:       #E3E5F2;
  --rule-2:     #C6CBE4;
  --violet:     #5B4FC4;
  --violet-dim: #8479DE;
  --teal:       #16A79E;
  --blue:       #3E63CF;
  --plum:       #8B45BE;
  --tint:       #F3F4FC;   /* periwinkle ground — replaces flat grey */
  --tint-2:     #E9EBF9;
  --pass:       #1C7A4E;
  --warn:       #B0741F;
  --fail:       #C25549;
  --muted:      #56637A;
  --muted-2:    #8A97AB;
  --muted-dark: #98A6BC;

  --display: "Jost", "Futura", ui-sans-serif, system-ui, sans-serif;
  --body:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(20px, 4.6vw, 60px);
  --maxw: 1200px;
  --sec-y: clamp(66px, 9vw, 130px);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

::selection{ background:rgba(91,79,196,.22); color:var(--ink); }
.sec--ink ::selection, .ftr ::selection, .chrom-band ::selection{ background:rgba(132,121,222,.4); color:#fff; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
section[id]{ scroll-margin-top:96px; }

/* Cross-page transitions where supported — a soft fade instead of a hard swap */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:linear-gradient(90deg, var(--teal), var(--blue) 34%, var(--violet) 64%, var(--plum) 100%);
  opacity:.2;
}
/* Scroll progress: the same gradient, revealed left to right. background-size is
   locked to the viewport so the colour scale stays put as the fill grows. */
body::after{
  content:""; position:fixed; top:0; left:0; height:2px; z-index:121;
  width:var(--scroll, 0%);
  background:linear-gradient(90deg, var(--teal), var(--blue) 34%, var(--violet) 64%, var(--plum) 100%);
  background-size:100vw 2px; background-repeat:no-repeat;
  transition:width .1s linear;
}
@media (prefers-reduced-motion: reduce){
  body::before{ opacity:1; }
  body::after{ display:none; }
}

.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;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:12px 18px; font-family:var(--data); font-size:12px; }
.skip:focus{ left:12px; top:14px; }

/* ---------- Type ---------- */

h1,h2,h3,h4{ font-family:var(--display); font-weight:300; margin:0; letter-spacing:-.02em; }
.h-xl{ font-size:clamp(2.7rem, 6.4vw, 5rem); line-height:1.02; letter-spacing:-.035em; }
.h-lg{ font-size:clamp(2rem, 4vw, 3.15rem); line-height:1.08; letter-spacing:-.03em; }
/* Composed line breaks are a desktop device; on narrow screens natural wrapping
   sets better lines than any break chosen at design time. */
@media (max-width:560px){ .h-lg br, .h-xl br{ display:none; } }
.h-md{ font-size:clamp(1.35rem, 2.1vw, 1.72rem); line-height:1.22; letter-spacing:-.02em; }

.lede{ font-size:clamp(1.04rem, 1.4vw, 1.2rem); line-height:1.65; color:#39465E; max-width:58ch; }
.body-copy p{ margin:0 0 1.05em; }
.body-copy p:last-child{ margin-bottom:0; }

.mono{ font-family:var(--data); }
.label{
  font-family:var(--data); font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2);
}
.label--ink{ color:var(--muted); }
.label--dark{ color:var(--muted-dark); }

/* ---------- Section header ---------- */

.sec-head{
  display:flex; align-items:baseline; gap:18px;
  padding-bottom:15px; margin-bottom:clamp(30px,3.8vw,50px);
  border-bottom:1px solid var(--rule);
}
.sec-head__n{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.9rem,2.8vw,2.6rem); line-height:.8;
  letter-spacing:-.02em; color:var(--violet);
  transform:translateY(2px);
}
.sec-head--teal .sec-head__n{ color:var(--teal); }
.sec-head--blue .sec-head__n{ color:var(--blue); }
.sec-head--plum .sec-head__n{ color:var(--plum); }
.sec-head__t{
  font-family:var(--data); font-size:12.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink); white-space:nowrap;
  display:flex; align-items:center; gap:11px; min-width:0;
}
/* pages without a chapter number keep the colour tick */
.sec-head__t:first-child::before{
  content:""; width:8px; height:8px; flex:0 0 auto; border-radius:1px;
  background:var(--violet);
}
.sec-head--teal .sec-head__t:first-child::before{ background:var(--teal); }
.sec-head--blue .sec-head__t:first-child::before{ background:var(--blue); }
.sec-head--plum .sec-head__t:first-child::before{ background:var(--plum); }
.sec-head__rule{ flex:1 1 auto; height:1px; background:var(--rule); }
.sec-head__note{
  font-family:var(--data); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted-2); white-space:nowrap;
}
@media (max-width:760px){ .sec-head__note{ display:none; } }
/* On the narrowest phones a long uppercase eyebrow with .22em tracking can
   exceed the gutter and force horizontal scroll; loosen it enough to wrap. */
@media (max-width:400px){ .sec-head__t{ letter-spacing:.13em; white-space:normal; } }
.sec-head--dark{ border-bottom-color:var(--ink-3); }
.sec-head--dark .sec-head__t{ color:#fff; }
.sec-head--dark .sec-head__rule{ background:var(--ink-3); }
.sec-head--dark .sec-head__note{ color:var(--muted-dark); }
.sec-head--dark .sec-head__n{ color:var(--violet-dim); }

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--data); font-size:11.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  padding:15px 26px; border:1px solid transparent; border-radius:6px;
  text-decoration:none; cursor:pointer; background:none;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--violet); color:#fff; border-color:var(--violet); }
.btn--solid:hover{ background:var(--ink); border-color:var(--ink); }
.btn--line{ border-color:var(--rule-2); color:var(--ink); }
.btn--line:hover{ border-color:var(--ink); background:var(--mist); }

.btn--accent{ background:var(--violet); color:#fff; border-color:var(--violet); }
.btn--accent:hover{ background:#4A3FB0; border-color:#4A3FB0; }
.btn--wide{ width:100%; padding-block:17px; }
.btn__arrow{ transition:transform .18s ease; }
.btn:hover .btn__arrow{ transform:translateX(3px); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* ---------- Header ---------- */

.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .25s ease, border-color .25s ease;
}
.hdr[data-stuck="true"]{
  box-shadow:0 12px 30px -22px rgba(13,18,32,.5);
  border-bottom-color:var(--rule-2);
}
.nav__verify{ display:inline-flex; align-items:center; gap:8px; }
.nav__seal{ width:14px; height:15.75px; flex:0 0 auto; }
.nav__seal-shield{ fill:none; stroke:var(--teal); stroke-width:1.3; }
.nav__seal-tick{ fill:none; stroke:var(--teal); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav__verify:hover .nav__seal-shield{ fill:rgba(22,167,158,.12); }
.hdr__bar{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:88px; }
.hdr__brand{ display:flex; align-items:center; gap:18px; text-decoration:none; flex:0 0 auto; }
.hdr__logo{ height:32px; width:auto; }
.hdr__loc{
  display:none; padding-left:18px; border-left:1px solid var(--rule);
  font-family:var(--data); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-2); line-height:1.6;
}
@media (min-width:1040px){ .hdr__loc{ display:block; } }
@media (max-width:560px){ .hdr__logo{ height:25px; } .hdr__bar{ height:74px; } }

.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  font-family:var(--data); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:10px 14px; border-radius:2px;
  transition:color .16s ease, background-color .16s ease;
}
.nav a:hover{ color:var(--ink); background:var(--mist); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav .btn{ margin-left:10px; padding:13px 22px; }
.nav a.btn--solid{ color:#fff; }
.nav a.btn--solid:hover{ color:#fff; background:var(--ink); border-color:var(--ink); }

.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--rule-2); border-radius:6px; cursor:pointer;
}
.nav-toggle span{ display:block; width:18px; height:1px; background:var(--ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:1px; background:var(--ink); }
.nav-toggle span::before{ top:-5px; }
.nav-toggle span::after{ top:5px; }

@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--rule);
    padding:6px var(--gut) 22px; display:none;
    box-shadow:0 22px 44px -32px rgba(13,18,32,.45);
  }
  .nav[data-open="true"]{ display:flex; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--rule); }
  .nav .btn{ margin:16px 0 0; }
}

/* ---------- Hero ---------- */

.hero{ padding-top:clamp(50px,6.5vw,88px); }
.hero--photo{ padding-top:0; padding-bottom:0; }

/* The stage holds the photograph and the text. Its height tracks the image's own
   aspect ratio (21:9, capped at 2300px wide), so the WHOLE frame is shown —
   monitor, machine and the vials in the foreground — with no vertical crop. The
   photo ends exactly where the chromatogram band begins. */
.hero__stage{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:min(43.5vw, 985px);
  padding-block:clamp(48px,5vw,72px);
}
.hero__img{
  position:absolute; top:0; bottom:0; right:0;
  width:min(100%, 2300px); z-index:0;
}
.hero__img img{
  width:100%; height:100%; object-fit:cover;
  object-position:70% bottom;     /* if anything must crop, crop the ceiling */
  filter:saturate(.82) brightness(1.03);
}
@media (min-width:2300px){
  .hero__img{
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
  }
}
/* legibility wash: solid at the text edge, clear over the instruments */
.hero__stage::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,
    rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 30%,
    rgba(255,255,255,.55) 52%, rgba(255,255,255,.08) 78%, rgba(255,255,255,0) 100%);
}
/* faint brand tint so the neutral photo sits in the palette */
.hero__stage::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(91,79,196,.045), rgba(22,167,158,.03));
  mix-blend-mode:multiply;
}
.hero__content{ position:relative; z-index:2; }
@media (max-width:760px){
  .hero__stage::before{
    background:linear-gradient(180deg,
      rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.3) 100%);
  }
  .hero__img img{ object-position:64% bottom; }
  .hero__stage{ min-height:0; align-items:flex-start; padding-top:clamp(40px,10vw,64px); }
  .hero__stage .hero__content{ padding-bottom:150px; }
}
.hero__eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.hero__eyebrow::after{ content:""; flex:1 1 auto; height:1px; background:var(--rule); max-width:110px; }
.hero__eyebrow .label__loc{ white-space:nowrap; }
/* On phones the eyebrow no longer fits one line, so drop the location onto its
   own line rather than letting "Las Vegas, Nevada" wrap mid-phrase, and hide
   the decorative rule so the two lines read cleanly. */
@media (max-width:620px){
  .hero__eyebrow .label__dot{ display:none; }
  .hero__eyebrow .label__loc{ display:block; margin-top:5px; }
  .hero__eyebrow::after{ display:none; }
}
.hero h1{ margin-bottom:28px; max-width:22ch; }
.hero__lede{ max-width:54ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:11px; margin-top:36px; }

/* Full-bleed chromatogram — the signature */
.chrom-band{
  margin-top:0;
  background:
    radial-gradient(1000px 420px at 22% 0%, rgba(91,79,196,.32), transparent 70%),
    radial-gradient(880px 400px at 84% 100%, rgba(22,167,158,.20), transparent 68%),
    var(--ink);
}
.chrom-band__inner{ padding-top:clamp(26px,3.2vw,44px); padding-bottom:clamp(20px,2.4vw,30px); }
.chrom-band__inner > .chrom{ padding-inline:clamp(8px,1.4vw,18px); }
.chrom{ width:100%; height:auto; display:block; overflow:visible; }
.chrom-axis line{ stroke:rgba(255,255,255,.20); stroke-width:1; }

.chrom-line{ fill:none; stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
.chrom-fill{ stroke:none; }
.chrom-t text{ font-family:var(--data); font-size:11px; fill:rgba(255,255,255,.42); text-anchor:middle; }
.chrom-p text{ font-family:var(--data); font-size:13px; font-weight:500; letter-spacing:.05em; text-anchor:middle; }
.chrom-p text.rt{ font-size:10px; font-weight:400; opacity:.65; letter-spacing:.04em; }
.chrom-drop line{ stroke-width:1; stroke-dasharray:2 4; opacity:.4; transition:opacity .2s ease; }
.chrom-p g{ transition:opacity .2s ease; }
.chrom-dots{ pointer-events:none; }
.chrom-dot{ opacity:0; transition:opacity .2s ease; }
.chrom-hit{ fill:#fff; fill-opacity:0; cursor:pointer; outline:none; transition:fill-opacity .18s ease; }
.chrom-hit:hover{ fill-opacity:.04; }
.chrom-hit:focus-visible{ fill-opacity:.07; stroke:rgba(255,255,255,.4); stroke-width:1; }

/* Selected peak stays lit, the rest recede */
.chrom[data-active] .chrom-p g,
.chrom[data-active] .chrom-drop line{ opacity:.2; }
.chrom[data-active] .chrom-p g.is-on{ opacity:1; }
.chrom[data-active] .chrom-drop line.is-on{ opacity:.85; }
.chrom .chrom-dot.is-on{ opacity:1; }
.chrom[data-active] .chrom-fill{ opacity:.4; transition:opacity .2s ease; }

.chrom-line{ stroke-dasharray:8600; stroke-dashoffset:8600; animation:draw 2.6s cubic-bezier(.34,.05,.2,1) .3s forwards; }
.chrom-fill,.chrom-p,.chrom-t,.chrom-drop{ opacity:0; animation:fadeIn 1s ease 2.1s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .chrom-line{ animation:none; stroke-dashoffset:0; }
  .chrom-fill,.chrom-p,.chrom-t,.chrom-drop{ animation:none; opacity:1; }
}

.chrom-readout{
  margin-top:clamp(16px,2vw,26px);
  padding-top:16px; border-top:1px solid rgba(255,255,255,.12);
  min-height:46px;
}
.chrom-readout__default,
.chrom-readout__peak{ display:flex; flex-wrap:wrap; align-items:center; gap:10px clamp(18px,2.6vw,42px); }
.chrom-readout span{
  font-family:var(--data); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.chrom-readout b{ font-weight:500; color:#fff; letter-spacing:.06em; }
.chrom-readout__hint{ color:rgba(255,255,255,.32) !important; margin-left:auto; }
@media (max-width:760px){ .chrom-readout__hint{ display:none; } }
.chrom-readout__name{ display:inline-flex; align-items:center; gap:8px; }
.chrom-readout__name i{ width:8px; height:8px; border-radius:1px; background:currentColor; display:block; }
.chrom-readout__name b{ font-size:12px; letter-spacing:.1em; }
.chrom-readout__peak{ animation:readIn .22s ease both; }
@keyframes readIn{ from{ opacity:0; transform:translateY(3px);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .chrom-readout__peak{ animation:none; } }

/* ---------- Sections ---------- */

.sec{ padding-block:var(--sec-y); }
.sec--mist{ background:var(--mist); }
.sec--ink{
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(91,79,196,.34), transparent 68%),
    radial-gradient(760px 420px at 88% 100%, rgba(22,167,158,.22), transparent 66%),
    var(--ink);
  color:#fff;
}
.sec--tight{ padding-block:clamp(52px,7vw,92px); }

.intro{ max-width:60ch; margin-bottom:clamp(34px,4.4vw,58px); }
.intro h2{ margin-bottom:18px; }

.two-col{ display:grid; gap:clamp(30px,4vw,66px); grid-template-columns:1fr; }
@media (min-width:940px){ .two-col{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } }

/* ---------- Test rows ---------- */

.tests{ border-top:1px solid var(--rule); }
.test{ border-bottom:1px solid var(--rule); }
.test__row{
  display:grid; grid-template-columns:1fr; gap:8px 30px;
  padding:26px 34px 26px 0; position:relative; cursor:pointer;
  list-style:none; transition:background-color .2s ease;
}
.test__row::-webkit-details-marker{ display:none; }
.test__row::before{
  content:""; position:absolute; left:calc(var(--gut) * -0.5); right:calc(var(--gut) * -0.5); top:0; bottom:0;
  background:var(--tint); opacity:0; transition:opacity .2s ease; z-index:-1; border-radius:2px;
}
.test__row:hover::before{ opacity:1; }
.test__row::after{
  content:""; position:absolute; right:6px; top:34px;
  width:11px; height:11px;
  background:
    linear-gradient(var(--violet),var(--violet)) center/11px 1.5px no-repeat,
    linear-gradient(var(--violet),var(--violet)) center/1.5px 11px no-repeat;
  transition:transform .25s ease, opacity .2s ease; opacity:.75;
}
.test[open] .test__row::after{ transform:rotate(90deg); background-size:11px 1.5px, 0 0; opacity:1; }
.test__more{ padding:2px 0 28px; }
.test__more ul{ margin:0; padding:0; list-style:none; max-width:76ch; }
@media (min-width:860px){ .test__more ul{ margin-left:calc((100% - 160px - 60px) * 0.35); } }
.test__more li{
  position:relative; padding:0 0 0 22px; margin-bottom:11px;
  font-size:14.4px; line-height:1.62; color:var(--muted);
}
.test__more li:last-child{ margin-bottom:0; }
.test__more li::before{
  content:""; position:absolute; left:2px; top:9px;
  width:6px; height:6px; border-radius:1px; background:var(--teal);
}
@media (min-width:860px){
  .test__row{ grid-template-columns:minmax(0,1.05fr) minmax(0,1.95fr) 160px; align-items:baseline; }
}
.test__name{ font-family:var(--display); font-weight:400; font-size:1.28rem; letter-spacing:-.02em; }
.test__m{ display:block; margin-top:6px; color:var(--blue); }
.test__d{ margin:0; font-size:14.8px; line-height:1.62; color:var(--muted); }
.test__t{
  font-family:var(--data); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted-2); white-space:nowrap;
}
@media (min-width:860px){ .test__t{ text-align:right; } }

/* ---------- Certificate points ---------- */

.points{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; border-top:1px solid var(--rule); }
@media (min-width:820px){ .points{ grid-template-columns:1fr 1fr; column-gap:clamp(28px,4.5vw,72px); } }
.points--3{ margin-top:clamp(34px,4.4vw,54px); }
@media (min-width:820px){ .points--3{ grid-template-columns:repeat(3,1fr); column-gap:clamp(26px,3.6vw,56px); } }
.points--3 li:nth-child(1) .points__k{ color:var(--teal); }
.points--3 li:nth-child(2) .points__k{ color:var(--blue); }
.points--3 li:nth-child(3) .points__k{ color:var(--plum); }
.points li{ padding:22px 0; border-bottom:1px solid var(--rule); font-size:14.8px; line-height:1.62; color:var(--muted); transition:color .2s ease; }
.points li:hover{ color:#3B4A63; }
.points li:nth-child(1) .points__k{ color:var(--teal); }
.points li:nth-child(2) .points__k{ color:var(--blue); }
.points li:nth-child(3) .points__k{ color:var(--violet); }
.points li:nth-child(4) .points__k{ color:var(--plum); }
.points h3{ font-family:var(--display); font-weight:400; font-size:1.28rem; letter-spacing:-.018em; color:var(--ink); margin-bottom:8px; }
.points__k{ display:block; margin-bottom:12px; color:var(--violet); font-size:13px; font-weight:600; letter-spacing:.18em; }

/* ---------- Team credentials ---------- */

.creds{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
  margin-top:clamp(30px,4vw,48px);
}
@media (min-width:820px){ .creds{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cred{
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:28px clamp(18px,2.2vw,32px); background:var(--paper); position:relative;
  transition:background-color .22s ease;
}
.cred:hover{ background:var(--tint); }
.cred::before{ content:""; position:absolute; left:0; top:-1px; width:100%; height:2px; background:var(--violet); }
.cred:nth-child(1)::before{ background:var(--teal); }
.cred:nth-child(2)::before{ background:var(--blue); }
.cred:nth-child(3)::before{ background:var(--plum); }
.cred:nth-child(1) .cred__fig{ color:var(--teal); }
.cred:nth-child(2) .cred__fig{ color:var(--blue); }
.cred:nth-child(3) .cred__fig{ color:var(--plum); }
.cred__fig{
  font-family:var(--display); font-weight:300; font-size:clamp(2.3rem,3.6vw,3rem);
  line-height:1; letter-spacing:-.035em; margin-bottom:13px;
}
.cred__fig sup{ font-size:.34em; letter-spacing:.08em; top:-1.5em; margin-left:3px; color:var(--muted); }
.cred__t{ font-family:var(--data); font-size:12px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--ink); margin-bottom:8px; }
.cred__d{ margin:0; font-size:13.8px; line-height:1.55; color:var(--muted); }

/* ---------- Steps ---------- */

.steps{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--rule); }
@media (min-width:780px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); border-left:1px solid var(--rule); } }
.step{ padding:24px clamp(18px,2vw,28px) 26px; border-bottom:1px solid var(--rule); }
@media (min-width:780px){ .step{ border-right:1px solid var(--rule); } }
.step__n{ font-family:var(--data); font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--violet); margin-bottom:13px; }
.steps--stack .step:nth-child(1) .step__n{ color:var(--teal); }
.steps--stack .step:nth-child(2) .step__n{ color:var(--blue); }
.steps--stack .step:nth-child(3) .step__n{ color:var(--plum); }
.step h3{ font-size:1.12rem; font-weight:400; margin-bottom:8px; }
.step p{ margin:0; font-size:13.9px; line-height:1.58; color:var(--muted); }
.steps--stack{ grid-template-columns:1fr; border-left:0; }
.steps--stack .step{ border-right:0; padding-inline:0; }

/* ---------- Forms ---------- */

.field{ display:block; margin-bottom:20px; }
.field__l{
  display:block; margin-bottom:8px;
  font-family:var(--data); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.field__h{ display:block; margin-top:7px; font-size:12.5px; color:var(--muted-2); line-height:1.5; }
input[type=text],input[type=email],input[type=password],input[type=tel],select,textarea{
  width:100%; padding:14px 15px;
  border:1px solid var(--rule-2); border-radius:6px; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.4;
  transition:border-color .16s ease, box-shadow .16s ease;
}
input::placeholder,textarea::placeholder{ color:#A9B4C4; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(91,79,196,.14); }
textarea{ resize:vertical; min-height:120px; }
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:40px;
}
.field--mono input{ font-family:var(--data); font-size:14.5px; }
.field--dark .field__l{ color:var(--muted-dark); }
.field--dark input{ background:#0A0F1C; border-color:var(--ink-3); color:#fff; }
.field--dark input::placeholder{ color:#5C6980; }
.field--dark input:focus{ border-color:var(--violet-dim); box-shadow:0 0 0 3px rgba(132,121,222,.22); }

.check{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; font-size:14px; line-height:1.55; color:var(--muted); }
.check input{ width:16px; height:16px; margin-top:3px; accent-color:var(--violet); }

.panel{ background:var(--paper); border:1px solid var(--rule); border-radius:3px; padding:clamp(26px,3.4vw,44px); }

.notice{ border-left:2px solid var(--violet); background:var(--mist); padding:16px 19px; font-size:14px; line-height:1.6; color:#3B4A63; }
.notice--ok{ border-left-color:var(--pass); }
.notice--dark{ background:var(--ink-2); border-left-color:var(--violet-dim); color:#C6D0E0; }

/* ---------- Verify ---------- */

.verify-form{ display:grid; gap:16px; grid-template-columns:1fr; align-items:end; }
@media (min-width:800px){ .verify-form{ grid-template-columns:minmax(0,1fr) auto; gap:20px; } }

.vr{ border:1px solid var(--ink-3); border-top:2px solid var(--pass); border-radius:8px; background:#0A0F1C; margin-top:28px; }
.vr--fail{ border-top-color:var(--fail); }
.vr--revoked{ border-top-color:var(--warn); }
.vr__head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 20px; border-bottom:1px solid var(--ink-3); }
.vr__badge{
  font-family:var(--data); font-size:10px; font-weight:500; letter-spacing:.17em; text-transform:uppercase;
  background:var(--pass); color:#fff; padding:5px 12px; border-radius:5px;
}
.vr__badge--fail{ background:var(--fail); }
.vr__badge--warn{ background:var(--warn); }
.vr__row{ display:grid; grid-template-columns:1fr; gap:2px 24px; padding:12px 20px; border-bottom:1px solid var(--ink-3); }
@media (min-width:620px){ .vr__row{ grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr); align-items:baseline; } }
.vr__k{ font-family:var(--data); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-dark); }
.vr__v{ font-size:15px; font-weight:500; color:#fff; }
.vr__note{ margin:0; padding:16px 20px; font-size:13.2px; line-height:1.6; color:var(--muted-dark); }

/* ---------- Footer ---------- */

.ftr{ background:var(--ink); color:#fff; border-top:2px solid transparent;
  border-image:linear-gradient(90deg, var(--teal), var(--blue) 34%, var(--violet) 64%, var(--plum)) 1; padding-top:clamp(50px,6vw,78px); padding-bottom:34px; }
.ftr__top{ display:grid; gap:36px; grid-template-columns:1fr; padding-bottom:36px; border-bottom:1px solid var(--ink-3); }
@media (min-width:820px){ .ftr__top{ grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr); gap:48px; } }
.ftr__logo{ height:28px; width:auto; margin-bottom:22px; }
.ftr__addr{ font-style:normal; font-size:14px; line-height:1.72; color:var(--muted-dark); }
.ftr__addr a{ color:#D6DEEA; text-decoration:none; border-bottom:1px solid var(--ink-3); }
.ftr__addr a:hover{ color:#fff; border-bottom-color:var(--violet-dim); }
.ftr__col h4{ font-family:var(--data); font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-dark); margin-bottom:15px; }
.ftr__col ul{ list-style:none; margin:0; padding:0; }
.ftr__col li{ margin-bottom:10px; }
.ftr__col a{ font-size:14.5px; color:#D6DEEA; text-decoration:none; }
.ftr__col a:hover{ color:var(--violet-dim); }
.ftr__legal{ padding-top:30px; max-width:104ch; }
.ftr__legal-t{
  font-family:var(--data); font-size:10px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-dark); margin:0 0 12px;
}
.ftr__legal p{ margin:0 0 11px; font-size:12.2px; line-height:1.72; color:#7B899F; }
.ftr__legal p:last-child{ margin-bottom:0; }
.ftr__legal strong{ color:#B6C1D2; font-weight:600; }
.ftr__legal a{ color:#B6C1D2; text-decoration:none; border-bottom:1px solid var(--ink-3); }
.ftr__legal a:hover{ color:#fff; border-bottom-color:var(--violet-dim); }
.ftr__bar{
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  /* center, not stretch: the links are 32px tap targets while the © and
     location are bare text — without this the link text rides low of the
     spans (Jake, 2026-08-24) */
  align-items:center;
  margin-top:22px; padding-top:20px; border-top:1px solid var(--ink-3);
}
.ftr__bar span,.ftr__bar a{
  font-family:var(--data); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:#6D7B93; text-decoration:none;
}
/* The legal-bar links are real tap targets; give them height without changing
   the row's look on desktop. */
.ftr__bar a{ display:inline-flex; align-items:center; min-height:32px; }
.ftr__bar a:hover{ color:#fff; }

/* ---------- Reveal ---------- */

.js .rv{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1); }
.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .rv{ opacity:1; transform:none; transition:none; } }

.link-dark{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--violet-dim); text-decoration:none;
  border-bottom:1px solid rgba(132,121,222,.35); padding-bottom:2px;
  transition:color .16s ease, border-color .16s ease;
}
.link-dark:hover{ color:#fff; border-bottom-color:#fff; }
.link-dark:hover .btn__arrow{ transform:translateX(3px); }
.link-dark .btn__arrow{ transition:transform .18s ease; }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* ---------- Closing call to action ---------- */

@media (min-width:880px){  }

/* Inline status badges in the explainer column */
.body-copy .vr__badge{ display:inline-block; vertical-align:2px; }

/* ---------- Legal pages ---------- */
.legal{ max-width:74ch; }
.legal__block{ padding-top:clamp(28px,3.4vw,42px); border-top:1px solid var(--rule); margin-top:clamp(28px,3.4vw,42px); }
.legal__block:first-child{ margin-top:0; }
.legal__block h2{ margin-bottom:14px; }
.legal p{ margin:0 0 1.05em; font-size:15.4px; line-height:1.72; color:var(--muted); }
.legal p:last-child{ margin-bottom:0; }
.legal strong{ color:var(--ink); font-weight:600; }
.legal a{ color:var(--violet); text-decoration:none; border-bottom:1px solid var(--rule-2); }
.legal a:hover{ border-bottom-color:var(--violet); }
.legal__list{ margin:0 0 1.05em; padding:0; list-style:none; }
.legal__list li{
  position:relative; padding:0 0 12px 22px; margin-bottom:12px;
  font-size:15.2px; line-height:1.68; color:var(--muted);
  border-bottom:1px solid var(--rule);
}
.legal__list li:last-child{ border-bottom:0; padding-bottom:0; margin-bottom:0; }
.legal__list li::before{
  content:""; position:absolute; left:0; top:10px;
  width:7px; height:7px; border-radius:1px; background:var(--violet);
}
.legal__addr{ font-style:normal; font-size:15.2px; line-height:1.75; color:var(--muted); }

.legal__n{
  display:inline-block; min-width:2.1em;
  font-family:var(--data); font-size:.52em; font-weight:500;
  letter-spacing:.12em; color:var(--violet); vertical-align:middle;
}
.legal__caps{
  font-size:13.2px !important; line-height:1.72; letter-spacing:.005em;
  padding:18px 20px; background:var(--tint-2); border-left:2px solid var(--ink);
  color:#3B4A63 !important;
}
.legal__nav{ margin:14px 0 0; }
.legal__nav a{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--data); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--violet); text-decoration:none;
}
.legal__nav a:hover .btn__arrow{ transform:translateX(3px); }
.legal__nav .btn__arrow{ transition:transform .18s ease; }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* ---------- Compound catalogue ---------- */

.cat__bar{ display:grid; gap:16px; grid-template-columns:1fr; align-items:center; margin-bottom:22px; }
@media (min-width:900px){ .cat__bar{ grid-template-columns:minmax(0,420px); } }

.cat__search{ position:relative; display:block; }
.cat__search svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--muted-2); pointer-events:none;
}
.cat__search input{
  width:100%; padding:14px 40px 14px 41px;
  border:1px solid var(--rule-2); border-radius:6px; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:15px; appearance:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.cat__search input::-webkit-search-cancel-button{ display:none; }
.cat__search input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(91,79,196,.14); }
.cat__clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border:0; background:none; cursor:pointer;
  color:var(--muted-2); font-size:20px; line-height:1; border-radius:2px;
}
.cat__clear:hover{ color:var(--ink); background:var(--mist-2); }

.cat__list{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(216px, 1fr));
  gap:10px;
  position:relative; overflow:hidden;
}
.cat__list[data-collapsed="true"]{ max-height:322px; }
.cat__list[data-collapsed="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:96px;
  background:linear-gradient(180deg, rgba(243,244,252,0), var(--mist));
  pointer-events:none;
}
.cat__item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:52px; padding:13px 15px;
  background:var(--paper); border:1px solid var(--rule);
  border-radius:10px;
  box-shadow:0 1px 2px rgba(13,18,32,.04);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cat__item:hover{
  transform:translateY(-1px);
  border-color:var(--teal);
  box-shadow:0 10px 22px -12px rgba(13,18,32,.28);
}
.cat__id{ display:flex; align-items:center; gap:9px; min-width:0; }
.cat__ico{ width:16px; height:16px; flex:0 0 auto; }
.cat__ico-bg{ fill:var(--teal); }
.cat__ico-tick{ fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cat__ico--soon circle{
  fill:none; stroke:var(--warn); stroke-width:1.3;
  stroke-dasharray:2.6 2.4; opacity:.65;
}
.cat__name{
  font-family:var(--data); font-size:12.6px; font-weight:500; letter-spacing:.01em;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cat__name mark{ background:rgba(91,79,196,.16); color:var(--ink); border-radius:2px; padding:0 1px; }
.cat__item--soon{
  border-style:dashed; border-color:rgba(176,116,31,.42);
  background:rgba(176,116,31,.035); box-shadow:none;
}
.cat__item--soon:hover{ border-color:var(--warn); transform:none; box-shadow:none; }
.cat__item--soon .cat__name{ color:var(--muted); }
.cat__soon{
  font-family:var(--data); font-size:8.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--warn); white-space:nowrap; flex:0 0 auto;
}
.cat__soon--inline{
  display:inline-block; vertical-align:1px; margin:0 2px;
  border:1px dashed rgba(176,116,31,.45); border-radius:6px; padding:2px 8px;
}
.cat__empty{
  grid-column:1 / -1; background:var(--paper); border:1px solid var(--rule); border-radius:10px;
  padding:30px 24px; text-align:center;
}
.cat__empty p{ margin:0 0 6px; font-size:15px; color:var(--ink); }
.cat__empty span{ font-size:14px; color:var(--muted); }

.cat__foot{
  display:grid; gap:18px; grid-template-columns:1fr; align-items:center;
  margin-top:22px;
}
@media (min-width:820px){ .cat__foot{ grid-template-columns:auto 1fr; gap:28px; } }
.cat__note{ margin:0; font-size:14px; line-height:1.62; color:var(--muted); max-width:70ch; }
.cat__note a{ color:var(--violet); text-decoration:none; border-bottom:1px solid var(--rule-2); }
.cat__note a:hover{ border-bottom-color:var(--violet); }

/* ---------- Reveal choreography ---------- */

.sec-head.rv .sec-head__rule{ transform:scaleX(0); transform-origin:left; transition:transform .85s cubic-bezier(.25,.6,.2,1) .12s; }
.sec-head.rv.in .sec-head__rule{ transform:none; }

/* Credential accent rules wipe in, staggered left to right */
.creds.rv .cred::before{ transform:scaleX(0); transform-origin:left; transition:transform .7s cubic-bezier(.25,.6,.2,1); }
.creds.rv.in .cred:nth-child(1)::before{ transform:none; transition-delay:.10s; }
.creds.rv.in .cred:nth-child(2)::before{ transform:none; transition-delay:.24s; }
.creds.rv.in .cred:nth-child(3)::before{ transform:none; transition-delay:.38s; }

@media (prefers-reduced-motion: reduce){
  .sec-head.rv .sec-head__rule,
  .creds.rv .cred::before{ transform:none !important; transition:none; }
}

/* Fine grain on the dark surfaces — reads as depth rather than flat fill */
.chrom-band, .sec--ink, .ftr{ position:relative; }
.chrom-band{ z-index:2; }
.chrom-band::after, .sec--ink::after, .ftr::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.chrom-band > *, .sec--ink > *, .ftr > *{ position:relative; z-index:1; }

/* Verified / revoked badge lands with a small stamp */
.vr__head .vr__badge{ animation:stamp .4s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes stamp{
  from{ opacity:0; transform:scale(.86); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){ .vr__head .vr__badge{ animation:none; } }

/* ---------- Principals ---------- */

.principals{
  display:grid; grid-template-columns:1fr; gap:0;
  margin-top:clamp(34px,4.4vw,54px);
  border-top:1px solid var(--rule);
}
@media (min-width:680px){ .principals{ grid-template-columns:1fr 1fr; } }
.principal{
  padding:26px clamp(18px,2.4vw,34px) 24px;
  border-bottom:1px solid var(--rule);
}
@media (min-width:680px){ .principal:first-child{ border-right:1px solid var(--rule); } }
.principal__sig{
  font-family:"Mrs Saint Delafield", "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive;
  font-size:clamp(2.5rem,4.2vw,3.4rem); line-height:.9;
  color:var(--ink); margin-bottom:16px;
  transform:rotate(-1.4deg); transform-origin:left center;
}
.principal:nth-child(2) .principal__sig{ transform:rotate(-.6deg); }
.principal__name{
  font-family:var(--data); font-size:11.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  padding-top:14px; border-top:1px solid var(--rule); margin-bottom:6px;
}
.principal__role{ font-size:13.6px; line-height:1.5; color:var(--muted); }

/* ---------- Slim verify strip ---------- */

@media (min-width:820px){  }

/* ---------- Dark closing CTA ---------- */

/* ---------- Apply prompt inside the intake section ---------- */

.intake-cta{
  display:grid; gap:26px; grid-template-columns:minmax(0,1fr); align-items:center;
  margin-top:clamp(34px,4.2vw,52px);
  padding:clamp(28px,3.6vw,46px) clamp(24px,3.4vw,48px);
  border-radius:12px;
  background:
    radial-gradient(640px 300px at 12% 0%, rgba(91,79,196,.36), transparent 70%),
    radial-gradient(560px 280px at 90% 100%, rgba(22,167,158,.22), transparent 66%),
    var(--ink);
  box-shadow:0 28px 60px -34px rgba(13,18,32,.55);
  position:relative; overflow:hidden;
}
.intake-cta::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:linear-gradient(90deg, var(--teal), var(--blue) 34%, var(--violet) 64%, var(--plum));
  border-radius:12px 12px 0 0;
}
.intake-cta::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.intake-cta > *{ position:relative; z-index:1; }
@media (min-width:880px){ .intake-cta{ grid-template-columns:minmax(0,1fr) auto; gap:52px; } }
.intake-cta__lead{
  margin:0 0 10px; font-family:var(--display); font-weight:300;
  font-size:clamp(1.5rem,2.5vw,2.05rem); line-height:1.15; letter-spacing:-.02em; color:#fff;
}
.intake-cta__sub{ margin:0; font-size:15.2px; line-height:1.64; color:#B9C4D6; max-width:56ch; }
.intake-cta__act{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
@media (min-width:880px){ .intake-cta__act{ align-items:flex-end; } }
.btn--lg{ padding:18px 32px; font-size:12.5px; }
.intake-cta__note{
  font-family:var(--data); font-size:9.5px; letter-spacing:.15em; line-height:1.7;
  text-transform:uppercase; color:#7E8CA3;
}
@media (min-width:880px){ .intake-cta__note{ white-space:nowrap; } }


/* ---------- Portal feature list (login) ---------- */

.checks{ list-style:none; margin:0; padding:0; }
.checks li{
  display:flex; align-items:flex-start; gap:13px;
  padding:15px 0; border-bottom:1px solid var(--rule);
  font-size:14.8px; line-height:1.62; color:var(--muted);
}
.checks li:last-child{ border-bottom:0; }
.checks svg{
  width:17px; height:17px; flex:0 0 auto; margin-top:3px;
  color:var(--teal);
}
.checks strong{ color:var(--ink); font-weight:600; }

/* ---------- Password visibility toggle ---------- */

.field--pw{ position:relative; }
.field--pw input{ padding-right:46px; }
.pw-toggle{
  position:absolute; right:6px; bottom:6px;
  width:34px; height:34px; border:0; background:none; cursor:pointer;
  color:var(--muted-2); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
}
.pw-toggle:hover{ color:var(--ink); background:var(--mist-2); }
.pw-toggle svg{ width:18px; height:18px; }
.pw-toggle .pw-off{ display:none; }
.pw-toggle[aria-pressed="true"] .pw-on{ display:none; }
.pw-toggle[aria-pressed="true"] .pw-off{ display:block; }