/*
Theme Name: Nova Helix
Theme URI: https://novahelixai.com
Author: Nova Helix
Author URI: https://github.com/NdeveloperH
Description: Coded child theme for the Nova Helix product site. Realizes the "Nova Helix Deep Field" design direction: near-black ground, one violet accent, hairline structure, near-static.
Template: twentytwentyfive
Version: 1.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: nova-helix
*/

/* Every colour on this site is read from one of these tokens and from nowhere
   else. That is what lets the theme showcase repaint the whole page on hover by
   swapping ten values, with no per component overrides and no layout change. */
:root{
  --nh-bg:#0A0A0B;
  --nh-surface:#131315;
  --nh-surface2:#1B1B1E;
  --nh-ink:#ECEAE4;
  --nh-muted:#8E8E93;
  --nh-accent:#F5F4F0;
  --nh-accent-hi:#FFFFFF;--nh-photo:#FFFFFF;
  --nh-support:#C9C7C1;
  --nh-line:#232326;
  --nh-line-hi:#38383D;
  /* Ink laid on top of the accent, ie. the primary button label. */
  --nh-on-accent:#0A0A0B;
  /* Accent as a bare r,g,b triplet so the one permitted hero wash can be built
     from it with rgba() and follow the palette when it changes. */
  --nh-glow:236,234,228;
  --nh-r-sm:8px;
  --nh-r-md:14px;
  --nh-r-pill:999px;
  --nh-xs:8px;
  --nh-sm:16px;
  --nh-md:32px;
  --nh-lg:64px;
  --nh-xl:112px;
  --nh-font:"Segoe UI", system-ui, sans-serif;
  --nh-display:"Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}

/* Neutralize inherited defaults at zero specificity so component rules always win. */
:where(body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd){margin:0;padding:0}
:where(ul, ol){list-style:none}

/* Border box and fluid media are stated here, unconditionally, and NOT under
   .nh-site with everything else.

   The reason is a bug this file shipped with: every width below is written as a
   border-box width, but the only rule that set border-box was `.nh-site *`, and
   nothing on the rendered page ever carried the .nh-site class. So the plan
   cards were laid out 52px wider than their grid tracks and their full width
   buy buttons overhung the card edge, and a 1280px screenshot with no
   max-width forced a horizontal scrollbar on every phone. A rule this load
   bearing must not depend on a class that may or may not be present. */
*,*::before,*::after{box-sizing:border-box}
img,video{max-width:100%;height:auto}

html{-webkit-text-size-adjust:100%}
html,body{background:var(--nh-bg);color:var(--nh-ink);font-family:var(--nh-font);margin:0}

.nh-site{
  background:var(--nh-bg);
  color:var(--nh-ink);
  font-family:var(--nh-font);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* The .nh-site class is put on <body> by nh-site.php.

   Every base rule below is scoped to it, so none of it can leak into wp-admin
   or the admin bar, but each scope is wrapped in :where() so it contributes no
   specificity at all. That matters: `.nh-site a` is one class plus one element
   and therefore outranks `.nh-btn--primary`, which is one class, so switching
   this scope on without :where() repaints every primary button label in the
   link colour. Base rules must lose to component rules, always. */

:where(.nh-site) img{display:block}

:where(.nh-site) a{color:var(--nh-support);text-decoration:none}
:where(.nh-site) a:hover{text-decoration:underline}

.nh-site :focus-visible{outline:2px solid var(--nh-accent);outline-offset:3px;border-radius:var(--nh-r-sm)}

/* In-page anchors have to clear the sticky header, or the target section lands
   underneath it. The header is taller once it wraps, so the offset grows too. */
#themes,#faq,#pricing,#contact,#nh-main{scroll-margin-top:88px}

/* Colour is the only thing that ever animates on this site, and it animates for
   exactly one reason: the theme preview below. Declared once, before the
   component rules, so anything with its own transition still overrides it. */
@media (hover:hover) and (pointer:fine){
  html,body,.nh-site,.nh-site *{
    transition:background-color .3s ease,border-color .3s ease,color .3s ease,outline-color .3s ease;
  }
  .nh-hero::before{transition:background-image .3s ease}
}

/* ---------- container ---------- */
.nh-wrap{max-width:1080px;margin-inline:auto;padding-inline:24px;width:100%}

/* ---------- type ---------- */
:where(.nh-site) :is(h1,h2,h3){font-family:var(--nh-display);font-weight:700;letter-spacing:-0.02em;color:var(--nh-ink)}
:where(.nh-site) h1{font-size:clamp(2.35rem,5.2vw,3.6rem);line-height:1.06}
:where(.nh-site) h2{font-size:clamp(1.75rem,3.2vw,2.35rem);line-height:1.12;margin-bottom:var(--nh-sm)}
:where(.nh-site) h3{font-size:1.12rem;line-height:1.25;letter-spacing:-0.01em}
:where(.nh-site) p{max-width:66ch}
.nh-lede{color:var(--nh-muted);font-size:1.12rem}
.nh-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--nh-muted);font-weight:600}
.nh-accent{color:var(--nh-accent)}
.nh-muted{color:var(--nh-muted)}

/* ---------- buttons ---------- */
.nh-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;border-radius:var(--nh-r-pill);
  font-family:var(--nh-font);font-size:1rem;font-weight:600;
  text-decoration:none;border:1px solid transparent;white-space:nowrap;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .1s ease;
}
.nh-btn:hover{text-decoration:none}
.nh-btn:active{transform:translateY(1px)}
.nh-btn--primary{background:var(--nh-accent);color:var(--nh-on-accent)}
.nh-btn--primary:hover{background:var(--nh-accent-hi);color:var(--nh-on-accent)}
.nh-btn--ghost{border-color:var(--nh-line);color:var(--nh-ink);background:transparent}
.nh-btn--ghost:hover{border-color:var(--nh-line-hi);color:var(--nh-ink)}
.nh-btn--sm{padding:9px 20px;font-size:.94rem}
.nh-btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- header ---------- */
/* Sticky, conventional product-site bar: the mark alone on the left, section
   links beside it, one primary Download call to action hard right. Solid ground
   and a hairline, never a shadow. */
.nh-skip{position:absolute;left:-9999px;top:0}
.nh-skip:focus{left:8px;top:8px;z-index:80;background:var(--nh-accent);color:var(--nh-on-accent);padding:10px 16px;border-radius:var(--nh-r-pill);font-weight:600}

.nh-head{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--nh-line);background:var(--nh-bg)}
.admin-bar .nh-head{top:32px}
.nh-head .nh-wrap{display:flex;align-items:center;gap:16px 28px;min-height:68px}
.nh-brand{display:inline-flex;align-items:center;gap:10px;color:var(--nh-ink);font-family:var(--nh-display);font-weight:700;font-size:1.06rem;letter-spacing:-0.01em;flex:0 0 auto}
.nh-brand:hover{text-decoration:none;color:var(--nh-ink)}
.nh-brand__mark{width:24px;height:24px;flex:0 0 auto;border-radius:6px}
/* With the wordmark gone the icon carries the brand on its own, so it is set a
   little larger and given a real hit area. */
.nh-brand--mark-only{gap:0}
.nh-brand--mark-only .nh-brand__mark{width:30px;height:30px;border-radius:7px}
.nh-nav{display:flex;align-items:center;gap:26px;margin-right:auto}
.nh-nav a{color:var(--nh-muted);font-size:.97rem;font-weight:500;white-space:nowrap}
.nh-nav a:hover{color:var(--nh-ink);text-decoration:none}
.nh-nav a[aria-current="page"]{color:var(--nh-ink)}

/* Tab strip. The nav used to be four plain words, which gave a visitor nothing
   to tell them where they were. These read as tabs: a hit area, a hover plate,
   and a purple rule under the current section. The rule is drawn on a pseudo
   element pinned to the header's own hairline, so switching tabs never changes
   a tab's box and never reflows the sticky header. */
.nh-nav--tabs{gap:2px}
.nh-nav--tabs a{position:relative;padding:10px 14px;border-radius:8px 8px 0 0;line-height:1.2}
.nh-nav--tabs a::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:transparent}
.nh-nav--tabs a:hover{background:var(--nh-surface2);color:var(--nh-ink)}
.nh-nav--tabs a[aria-current="page"]{color:var(--nh-ink);font-weight:600}
.nh-nav--tabs a[aria-current="page"]::after{background:var(--nh-accent)}

.nh-head__cta{flex:0 0 auto;margin-left:auto}

/* ---------- hero ---------- */
.nh-hero{position:relative;overflow-x:clip;padding:var(--nh-lg) 0 var(--nh-xl)}
.nh-hero::before{
  content:"";position:absolute;inset:-160px 0 auto 0;height:620px;pointer-events:none;
  background:radial-gradient(52% 60% at 22% 34%, rgba(var(--nh-glow),.05), rgba(var(--nh-glow),0) 70%);
}
.nh-hero .nh-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:56px;align-items:center}
.nh-hero__copy{max-width:33rem}
.nh-hero h1{margin-bottom:20px}
.nh-hero .nh-lede{margin-bottom:30px}
.nh-hero__note{margin-top:16px;font-size:.9rem;color:var(--nh-muted)}
.nh-hero__shot{margin-right:-13vw}

/* Screenshots are shown raw. No panel, no border, no rounding, no filter: these
   are unedited captures of the running application and dressing them in
   browser-style chrome is exactly what made them read as mock-ups. */
.nh-shot{display:block;width:100%;height:auto}

/* ---------- band: heading column + hairline rows ---------- */
.nh-band{padding:var(--nh-xl) 0;border-top:1px solid var(--nh-line)}
.nh-band .nh-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px}
.nh-band__head p{color:var(--nh-muted);margin-top:14px;font-size:1rem}
.nh-rows{display:flex;flex-direction:column}
.nh-row{padding:24px 0;border-top:1px solid var(--nh-line)}
.nh-row:first-child{border-top:0;padding-top:0}
.nh-row h3{margin-bottom:7px}
.nh-row p{color:var(--nh-muted);font-size:1rem}

/* ---------- overlapping screenshot pair ---------- */
.nh-shots{padding:var(--nh-xl) 0;border-top:1px solid var(--nh-line)}
.nh-shots__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:start;margin-top:var(--nh-md)}
.nh-shots__b{transform:translateY(-40px)}
.nh-cap{margin-top:12px;font-size:.9rem;color:var(--nh-muted);max-width:46ch}

/* ---------- pricing ---------- */
.nh-pricing{padding:var(--nh-xl) 0;border-top:1px solid var(--nh-line)}
.nh-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;margin-top:var(--nh-md)}
.nh-plan{
  position:relative;
  background:var(--nh-surface);border:1px solid var(--nh-line);border-radius:var(--nh-r-md);
  padding:30px 26px;display:flex;flex-direction:column;
}
.nh-plan--featured{background:var(--nh-surface2);border-color:var(--nh-line-hi)}

/* Two cards are emphasised, for two different jobs, so they are marked in two
   different ways rather than competing for the same attention: Free carries a
   quiet tag because the download funnel runs through it, and Ultra is drawn as
   the flagship it is. The flagship glow is lit from --nh-glow, which the theme
   showcase re-tints, so the card follows whatever wallpaper is playing. */
.nh-plan__badge{
  position:absolute;top:-11px;left:24px;
  padding:4px 12px;border-radius:var(--nh-r-pill);
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.nh-plan--featured .nh-plan__badge{background:var(--nh-surface2);color:var(--nh-muted);border:1px solid var(--nh-line-hi)}
.nh-plan--flagship{
  background:var(--nh-surface);
  border-color:var(--nh-accent);
  box-shadow:0 0 0 1px var(--nh-accent);
}
.nh-plan--flagship .nh-plan__badge{background:var(--nh-accent);color:var(--nh-on-accent)}
.nh-plan h3{font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;color:var(--nh-muted);font-weight:600}
/* The price block is pinned to one height so the three rows of prices, blurbs
   and feature lists all start on the same baseline across the cards. */
.nh-plan__price{font-family:var(--nh-display);font-weight:700;font-size:3rem;line-height:1.05;letter-spacing:-0.03em;margin:12px 0 4px;min-height:3.15rem;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.nh-plan__price span{font-size:1rem;font-weight:400;color:var(--nh-muted);letter-spacing:0}
.nh-plan__for{color:var(--nh-muted);font-size:.95rem;min-height:3.8em}
.nh-plan ul{margin:22px 0 26px;flex:1 1 auto;display:flex;flex-direction:column;gap:11px}
.nh-plan li{position:relative;padding-left:20px;color:var(--nh-muted);font-size:.97rem;line-height:1.5}
.nh-plan li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--nh-accent)}
/* A roadmap line inside a plan card. It sits below the list, above the hairline,
   and carries no accent bullet, so it reads as what is coming rather than as one
   more thing already in the box. The wording it holds must stay unmistakably
   future tense. */
.nh-plan__note{margin:0 0 24px;padding-top:16px;border-top:1px solid var(--nh-line);color:var(--nh-muted);font-size:.86rem;line-height:1.55}
.nh-plan__note strong{color:var(--nh-ink);font-weight:600}
/* margin-top:auto as well as the flexing list, so the buy buttons sit on one
   line across all three cards even if a list is short or a blurb wraps.

   Stretched by the card's own flex axis rather than by width:100%. A percentage
   width is measured against the card's content box and then has the button's
   own padding and border added to it, so under content-box it overhangs the
   card by exactly 54px, which is what clipped the right edge of Get Pro through
   the middle of its radius. align-self:stretch cannot overrun whatever box it
   is given. */
.nh-plan .nh-btn{align-self:stretch;width:auto;margin-top:auto}
.nh-fineprint{margin-top:var(--nh-md);font-size:.9rem;color:var(--nh-muted);max-width:70ch}

/* ---------- faq ---------- */
.nh-faq{padding:var(--nh-xl) 0;border-top:1px solid var(--nh-line)}
.nh-faq__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:var(--nh-sm)}
.nh-q{padding:24px 0;border-top:1px solid var(--nh-line)}
.nh-q h3{margin-bottom:7px}
.nh-q p{color:var(--nh-muted);font-size:1rem;max-width:none}

/* ---------- closing call to action ---------- */
.nh-cta{padding:var(--nh-lg) 0 var(--nh-xl);border-top:1px solid var(--nh-line);text-align:center}
.nh-cta h2{margin-bottom:12px}
.nh-cta p{margin:0 auto 26px;color:var(--nh-muted)}
.nh-cta .nh-btns{justify-content:center}

/* ---------- prose pages ---------- */
.nh-page{padding:var(--nh-lg) 0 var(--nh-xl)}
.nh-page__head{max-width:70ch;margin-bottom:var(--nh-md)}
.nh-page__head h1{margin-bottom:10px}
.nh-prose{max-width:70ch}
.nh-prose h2{font-size:1.2rem;margin:34px 0 10px;letter-spacing:-0.01em}
.nh-prose h2:first-of-type{margin-top:0}
.nh-prose p{color:var(--nh-muted);margin-bottom:12px}
.nh-prose ul{margin:0 0 14px}
.nh-prose li{color:var(--nh-muted);position:relative;padding-left:20px;margin-bottom:8px}
.nh-prose li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--nh-line-hi)}
.nh-prose strong{color:var(--nh-ink);font-weight:600}
.nh-note{background:var(--nh-surface);border:1px solid var(--nh-line);border-radius:var(--nh-r-md);padding:22px 24px;margin:0 0 var(--nh-md)}
.nh-note p{margin:0;color:var(--nh-muted)}
.nh-note p + p{margin-top:10px}

/* ---------- centered status pages ---------- */
.nh-status{padding:var(--nh-xl) 0;display:flex;justify-content:center}
.nh-status__card{max-width:640px;width:100%;background:var(--nh-surface);border:1px solid var(--nh-line);border-radius:var(--nh-r-md);padding:44px 40px}
.nh-status__card h1{font-size:clamp(1.9rem,4vw,2.5rem);margin-bottom:12px}
.nh-status__card > p{color:var(--nh-muted)}
.nh-steps{margin-top:30px;padding-top:26px;border-top:1px solid var(--nh-line)}
.nh-steps ol{counter-reset:nhstep;display:flex;flex-direction:column;gap:14px;margin:16px 0 0}
.nh-steps li{counter-increment:nhstep;position:relative;padding-left:36px;color:var(--nh-muted)}
.nh-steps li::before{
  content:counter(nhstep);position:absolute;left:0;top:2px;width:23px;height:23px;
  border-radius:var(--nh-r-pill);background:var(--nh-surface2);border:1px solid var(--nh-line);
  color:var(--nh-ink);font-size:.78rem;font-weight:700;display:grid;place-items:center;
}

/* ---------- footer ---------- */
.nh-foot{border-top:1px solid var(--nh-line);padding:var(--nh-md) 0 var(--nh-lg);color:var(--nh-muted);font-size:.93rem}
.nh-foot .nh-wrap{display:flex;flex-wrap:wrap;gap:28px 40px;justify-content:space-between;align-items:flex-start}
.nh-foot__brand{min-width:0}
.nh-foot__links{display:flex;flex-wrap:wrap;gap:22px}
.nh-foot__links a{color:var(--nh-muted)}
.nh-foot__links a:hover{color:var(--nh-ink);text-decoration:none}
.nh-foot__note{max-width:44ch;margin-top:8px}
.nh-foot .nh-brand{font-size:1rem}
.nh-foot .nh-brand__mark{width:20px;height:20px}
.nh-foot__note a{color:var(--nh-support)}

/* Contact is a real button, not a word in a sentence, and the address is also
   printed as selectable text underneath. A mailto: is silent when the machine
   has no mail client registered, so the address has to be readable and
   copyable without one. */
.nh-foot__contact{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:18px;max-width:44ch}
.nh-foot__contact-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--nh-muted)}
.nh-foot__contact .nh-btn{white-space:normal;text-align:center;max-width:100%}
.nh-foot__contact-hint{font-size:.85rem;color:var(--nh-muted);line-height:1.5}
/* overflow-wrap:anywhere breaks the address only when the line genuinely cannot
   hold it. word-break:break-all, which was here before, breaks at whatever
   character the line happens to end on, which is what split it into
   "novahelixai.c om" on a phone. */
.nh-foot__addr{color:var(--nh-ink);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}

/* ---------- theme showcase ---------- */
/* A swatch catalogue, not a feature grid: every tile is the same object with
   different data, which is exactly what a catalogue is for. Colours inside the
   chips are the application's own palette values and are set inline per tile. */
.nh-themes{position:relative;isolation:isolate;overflow:clip;padding:var(--nh-lg) 0;border-top:1px solid var(--nh-line)}
/* This is the one band that runs to the site's wide measure instead of its text
   measure. Six tiles at the 1080px body width left roughly a third of the band
   empty on a wide monitor while the band's own rules ran edge to edge, so the
   grid read as floating inside the section rather than as the section. */
.nh-themes > .nh-wrap{position:relative;z-index:1;max-width:1280px}
/* Heading and explanation sit side by side rather than stacked, so the band is
   filled across as well as down. Stacked, the copy held a 66 character measure
   on the left and left the right half of a wide band empty above the grid,
   which is the dead space the layout was being blamed for. */
.nh-themes__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px 56px;align-items:end;margin-bottom:var(--nh-md)}
.nh-themes__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.nh-themes__head h2{margin-bottom:0}
.nh-themes__count{color:var(--nh-muted);font-size:.97rem}
/* One invitation per input type. A fine pointer is told to hover; anything else
   is told to tap, because on a touch screen tapping a tile really does work. */
.nh-themes__hint{display:none}
.nh-themes__tap{display:inline}
@media (hover:hover) and (pointer:fine){
  .nh-themes__hint{display:inline}
  .nh-themes__tap{display:none}
}
.nh-themes__note{color:var(--nh-muted);font-size:1rem;margin-bottom:0;max-width:none}

/* ---------- the live wallpaper stage ----------
   The application's whole argument for a live theme is that a video plays
   behind the interface and the surfaces above it go translucent. This band does
   the same thing with the same footage, inside its own two rules.

   Nothing here exists until a tile is pointed at: nh.js builds the video
   element on first hover, so a visitor who never touches the showcase
   downloads none of it and the page weight is unchanged. */
.nh-themes__stage{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  /* Soft top and bottom edges so the footage never hard-cuts against the
     section's hairlines. This is a mask and not a painted gradient: only the
     alpha channel is read, which is why it is written as an alpha ramp rather
     than as a colour. Nothing here puts a gradient on the page. */
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,1) 9%,rgba(0,0,0,1) 91%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,1) 9%,rgba(0,0,0,1) 91%,rgba(0,0,0,0) 100%);
}
.nh-themes__stage video{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;opacity:0;transition:opacity .5s ease;
}
.nh-themes__stage video.is-live{opacity:1}
/* Ground laid back over the footage so the tiles and the copy keep their
   contrast. It is the palette's own background token at partial opacity, so it
   follows whichever theme is being previewed rather than being a fixed wash. */
.nh-themes__stage::after{content:"";position:absolute;inset:0;background:var(--nh-bg);opacity:0;transition:opacity .5s ease}
.nh-themes.is-live .nh-themes__stage::after{opacity:.68}
/* And the tiles themselves go translucent over it, which is exactly what the
   application does. Browsers without color-mix keep the solid panel above. */
.nh-themes.is-live .nh-sw{background:color-mix(in srgb,var(--nh-surface) 56%,transparent);border-color:var(--nh-line-hi)}

.nh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px}
/* Six curated tiles, so the grid is stated as 3 x 2 rather than left to
   auto-fill, which would strand two tiles on a ragged last row. */
.nh-grid--six{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nh-sw{background:var(--nh-surface);border:1px solid var(--nh-line);border-radius:var(--nh-r-md);padding:12px;display:flex;flex-direction:column;gap:9px}
.nh-sw__chip{display:flex;align-items:center;gap:8px;height:66px;padding:0 12px;border:1px solid var(--nh-line);border-radius:var(--nh-r-sm);overflow:hidden}
.nh-grid--six .nh-sw{padding:16px}
/* Taller chips: 3 x 2 at the wide measure needs the tiles to carry some height
   or the band's two rules sit a long way from anything. */
.nh-grid--six .nh-sw__chip{height:132px}
.nh-sw__band{width:30px;height:34px;border-radius:6px;flex:0 0 auto}
.nh-sw__dot{width:17px;height:17px;border-radius:var(--nh-r-pill);flex:0 0 auto}
.nh-sw__aa{margin-left:auto;font-family:var(--nh-display);font-weight:700;font-size:1.05rem;line-height:1}
.nh-sw__name{color:var(--nh-ink);font-weight:600;font-size:.97rem;line-height:1.25}
.nh-sw__live,.nh-sw__tag{display:inline-block;vertical-align:2px;margin-left:4px;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--nh-line);border-radius:var(--nh-r-sm);padding:1px 6px;white-space:nowrap}
.nh-sw__live{color:var(--nh-accent);border-color:var(--nh-line-hi)}
.nh-sw__tag{color:var(--nh-muted)}
.nh-sw__hex{color:var(--nh-muted);font-size:.76rem;letter-spacing:.02em}

/* ---------- live theme preview ----------
   Hovering a tile rewrites the ten palette tokens on the root element, so the
   whole page repaints in that theme and reverts when the pointer leaves. It is
   pure CSS: :has() reads the hover state upward from the tile to the root.

   Three constraints held here. Only colour tokens change, so nothing reflows
   and there is no layout shift. The whole block sits behind
   (hover:hover) and (pointer:fine), so a touch device never enters this state
   and can never get stuck in it. And a browser without :has() simply keeps the
   default palette, which is the correct fallback rather than a broken one.

   Each set is the application's own palette for that clip: ground, band,
   primary and secondary accent and text colour are the shipped values, and
   surface2, muted and the two hairlines are mixed from them by the same ratios
   the base palette uses. */
@media (hover:hover) and (pointer:fine){

  html:has(#nh-t-event-horizon:hover){
    --nh-bg:#0F0A12;--nh-surface:#1A141F;--nh-surface2:#2C1B38;
    --nh-ink:#EEE9F2;--nh-muted:#9E99A1;
    --nh-accent:#AC4CF0;--nh-accent-hi:#B867F2;--nh-support:#2040DF;
    --nh-line:#2E173E;--nh-line-hi:#44205D;
    --nh-on-accent:#0F0A12;--nh-glow:172,76,240;
  }

  html:has(#nh-t-starfield:hover){
    --nh-bg:#0D0A12;--nh-surface:#19141F;--nh-surface2:#271B38;
    --nh-ink:#ECE9F2;--nh-muted:#9C99A1;
    --nh-accent:#904CF0;--nh-accent-hi:#A167F2;--nh-support:#20DF60;
    --nh-line:#27173E;--nh-line-hi:#3A205D;
    --nh-on-accent:#0D0A12;--nh-glow:144,76,240;
  }

  html:has(#nh-t-lofi-pixel:hover){
    --nh-bg:#0E0A12;--nh-surface:#1A141F;--nh-surface2:#2A1B38;
    --nh-ink:#EDE9F2;--nh-muted:#9D99A1;
    --nh-accent:#9E4CF0;--nh-accent-hi:#AD67F2;--nh-support:#DF20DF;
    --nh-line:#2B173E;--nh-line-hi:#3F205D;
    --nh-on-accent:#0E0A12;--nh-glow:158,76,240;
  }

  html:has(#nh-t-lofi-room:hover){
    --nh-bg:#0A0B12;--nh-surface:#14161F;--nh-surface2:#1B2038;
    --nh-ink:#E9EAF2;--nh-muted:#999AA1;
    --nh-accent:#4C67F0;--nh-accent-hi:#677EF2;--nh-support:#DF2080;
    --nh-line:#171D3E;--nh-line-hi:#202A5D;
    --nh-on-accent:#0A0A0B;--nh-glow:76,103,240;
  }

  html:has(#nh-t-deep-space:hover){
    --nh-bg:#120D0A;--nh-surface:#1F1814;--nh-surface2:#38251B;
    --nh-ink:#F2ECE9;--nh-muted:#A19C99;
    --nh-accent:#F0834C;--nh-accent-hi:#F29667;--nh-support:#2060DF;
    --nh-line:#3E2517;--nh-line-hi:#5D3520;
    --nh-on-accent:#120D0A;--nh-glow:240,131,76;
  }

  html:has(#nh-t-snow-house:hover){
    --nh-bg:#0A1112;--nh-surface:#141D1F;--nh-surface2:#1B3338;
    --nh-ink:#E9F0F2;--nh-muted:#99A0A1;
    --nh-accent:#4CD5F0;--nh-accent-hi:#67DBF2;--nh-support:#DF7020;
    --nh-line:#17383E;--nh-line-hi:#20545D;
    --nh-on-accent:#0A1112;--nh-glow:76,213,240;
  }

  /* The tile being previewed says so with its own border. Colour only, so the
     tile does not move and neither does anything after it. */
  .nh-sw--live:hover{border-color:var(--nh-accent);background:var(--nh-surface2)}
  /* Restated at the weight of the translucency rule above, which would
     otherwise win over it while a clip is playing. */
  .nh-themes.is-live .nh-sw--live:hover{border-color:var(--nh-accent);background:color-mix(in srgb,var(--nh-surface2) 72%,transparent)}
}

/* The same six palettes again, driven by an attribute nh.js sets on the root
   element, for input types where :hover is not dependable. The two mechanisms
   are kept in separate media queries so they can never both be live at once and
   fight over the tokens: hover drives the block above, tap drives this one.

   The values are identical to the hover set, deliberately duplicated rather
   than shared, because CSS cannot lift a token bundle out of a media query. */
@media (hover:none),(pointer:coarse){

  html[data-nh-theme="event-horizon"]{
    --nh-bg:#0F0A12;--nh-surface:#1A141F;--nh-surface2:#2C1B38;
    --nh-ink:#EEE9F2;--nh-muted:#9E99A1;
    --nh-accent:#AC4CF0;--nh-accent-hi:#B867F2;--nh-support:#2040DF;
    --nh-line:#2E173E;--nh-line-hi:#44205D;
    --nh-on-accent:#0F0A12;--nh-glow:172,76,240;
  }

  html[data-nh-theme="starfield"]{
    --nh-bg:#0D0A12;--nh-surface:#19141F;--nh-surface2:#271B38;
    --nh-ink:#ECE9F2;--nh-muted:#9C99A1;
    --nh-accent:#904CF0;--nh-accent-hi:#A167F2;--nh-support:#20DF60;
    --nh-line:#27173E;--nh-line-hi:#3A205D;
    --nh-on-accent:#0D0A12;--nh-glow:144,76,240;
  }

  html[data-nh-theme="lofi-pixel"]{
    --nh-bg:#0E0A12;--nh-surface:#1A141F;--nh-surface2:#2A1B38;
    --nh-ink:#EDE9F2;--nh-muted:#9D99A1;
    --nh-accent:#9E4CF0;--nh-accent-hi:#AD67F2;--nh-support:#DF20DF;
    --nh-line:#2B173E;--nh-line-hi:#3F205D;
    --nh-on-accent:#0E0A12;--nh-glow:158,76,240;
  }

  html[data-nh-theme="lofi-room"]{
    --nh-bg:#0A0B12;--nh-surface:#14161F;--nh-surface2:#1B2038;
    --nh-ink:#E9EAF2;--nh-muted:#999AA1;
    --nh-accent:#4C67F0;--nh-accent-hi:#677EF2;--nh-support:#DF2080;
    --nh-line:#171D3E;--nh-line-hi:#202A5D;
    --nh-on-accent:#0A0A0B;--nh-glow:76,103,240;
  }

  html[data-nh-theme="deep-space"]{
    --nh-bg:#120D0A;--nh-surface:#1F1814;--nh-surface2:#38251B;
    --nh-ink:#F2ECE9;--nh-muted:#A19C99;
    --nh-accent:#F0834C;--nh-accent-hi:#F29667;--nh-support:#2060DF;
    --nh-line:#3E2517;--nh-line-hi:#5D3520;
    --nh-on-accent:#120D0A;--nh-glow:240,131,76;
  }

  html[data-nh-theme="snow-house"]{
    --nh-bg:#0A1112;--nh-surface:#141D1F;--nh-surface2:#1B3338;
    --nh-ink:#E9F0F2;--nh-muted:#99A0A1;
    --nh-accent:#4CD5F0;--nh-accent-hi:#67DBF2;--nh-support:#DF7020;
    --nh-line:#17383E;--nh-line-hi:#20545D;
    --nh-on-accent:#0A1112;--nh-glow:76,213,240;
  }

  /* Colour transitions, which the base file grants only to fine pointers
     because until now a touch screen had nothing to preview. It does now, so
     the repaint should ease here as well rather than snap. */
  html,body,.nh-site,.nh-site *{
    transition:background-color .3s ease,border-color .3s ease,color .3s ease;
  }
}

/* The tile currently being previewed, marked by nh.js. Same mark as the hover
   state, and colour only, so nothing moves. */
.nh-sw--live.is-picked{border-color:var(--nh-accent);background:var(--nh-surface2)}
.nh-themes.is-live .nh-sw--live.is-picked{border-color:var(--nh-accent);background:color-mix(in srgb,var(--nh-surface2) 72%,transparent)}

/* ---------- reaching the developer ----------
   A mailto is silent on a machine with no mail client registered, which is the
   normal state of a fresh Windows install and is exactly what happened here:
   the browser took the link and opened a blank window. So the primary route is
   a form that posts to this server and is delivered by the site itself, and the
   address is offered beside it as plain, copyable text. Neither route needs a
   mail client to exist. */
.nh-contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.nh-contact__aside h2{font-size:1.12rem;margin-bottom:10px}
.nh-contact__aside p{color:var(--nh-muted);font-size:.97rem;margin-bottom:14px}
.nh-contact__block + .nh-contact__block{margin-top:var(--nh-md);padding-top:var(--nh-md);border-top:1px solid var(--nh-line)}

.nh-form{display:flex;flex-direction:column;gap:18px;max-width:34rem}
.nh-field{display:flex;flex-direction:column;gap:7px}
.nh-field > label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--nh-muted)}
.nh-field__opt{text-transform:none;letter-spacing:0;font-weight:400}
.nh-input{
  font-family:var(--nh-font);font-size:1rem;line-height:1.5;
  color:var(--nh-ink);background:var(--nh-surface);
  border:1px solid var(--nh-line);border-radius:var(--nh-r-sm);
  padding:12px 14px;width:100%;
}
.nh-input:hover{border-color:var(--nh-line-hi)}
.nh-input:focus{border-color:var(--nh-accent)}
.nh-input::placeholder{color:var(--nh-muted);opacity:.7}
textarea.nh-input{min-height:175px;resize:vertical}
.nh-form__submit{align-self:flex-start}
.nh-form__note{font-size:.88rem;color:var(--nh-muted)}
/* Bait for the kind of bot that fills every field it finds. Moved off screen
   rather than display:none, because some of them skip hidden inputs. */
.nh-hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

/* The outcome panel says what actually happened, including when it failed, and
   a failure still leaves the address on screen. */
.nh-outcome{background:var(--nh-surface);border:1px solid var(--nh-line);border-radius:var(--nh-r-md);padding:20px 22px;margin-bottom:var(--nh-md);max-width:34rem}
.nh-outcome--ok{border-color:var(--nh-accent)}
.nh-outcome p{margin:0;color:var(--nh-muted)}
.nh-outcome p + p{margin-top:9px}
.nh-outcome strong{color:var(--nh-ink);font-weight:600}

.nh-copy{cursor:pointer}
.nh-copy.is-unsure{border-color:var(--nh-line-hi)}
.nh-addr{color:var(--nh-ink);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere;font-weight:600}
.nh-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- responsive collapse ----------
   The desktop layout above is the design. Everything below is the collapse
   sequence for narrower viewports, in the order the layout actually breaks. */

/* Three-up plan grid and the two screenshot columns give out first. */
@media (max-width:980px){
  .nh-hero{padding:var(--nh-md) 0 var(--nh-lg)}
  .nh-hero .nh-wrap{grid-template-columns:minmax(0,1fr);gap:38px}
  .nh-hero__copy{max-width:none}
  .nh-hero__shot{margin-right:0}
  .nh-band .nh-wrap{grid-template-columns:minmax(0,1fr);gap:32px}
  .nh-shots__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .nh-shots__b{transform:none}
  /* One column, but capped and centred: a full width 980px plan card reads as a
     banner rather than a card, and its measure gets far too long. */
  .nh-plans{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}
  .nh-plan__for{min-height:0}
  .nh-faq__grid{grid-template-columns:minmax(0,1fr);gap:0}
  .nh-contact{grid-template-columns:minmax(0,1fr);gap:38px}
  .nh-themes__intro{grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
  .nh-themes__note{max-width:70ch}
  .nh-band,.nh-shots,.nh-pricing,.nh-faq{padding:var(--nh-lg) 0}
  .nh-themes{padding:var(--nh-md) 0 var(--nh-lg)}
  .nh-fineprint{margin-inline:auto}
}

/* The six theme tiles drop to two columns before the header wraps. */
@media (max-width:860px){
  .nh-grid--six{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The header bar runs out of room: mark and Download hold the first row, the
   tabs take a full width second row under a hairline. Four tabs still fit a
   360px phone, so the row is centred; if a narrower device or a large text
   setting ever overflows it, it scrolls sideways rather than wrapping a tab
   onto a second line where its underline would detach from the strip. */
@media (max-width:720px){
  #themes,#faq,#pricing,#contact,#nh-main{scroll-margin-top:124px}
  .nh-head .nh-wrap{flex-wrap:wrap;min-height:0;padding-top:12px;padding-bottom:12px;gap:0}
  .nh-brand{order:1}
  .nh-head__cta{order:2;margin-left:auto}
  .nh-nav{order:3;flex-basis:100%;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--nh-line);gap:24px;justify-content:center;margin-right:0}
  .nh-nav--tabs{gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:0}
  .nh-nav--tabs::-webkit-scrollbar{display:none}
  /* The tab row is the bottom edge of the header on a phone, so the active
     underline sits on the header's own border rather than 1px past it. */
  .nh-nav--tabs a::after{bottom:0}
  .nh-foot .nh-wrap{gap:26px}
  .nh-foot__links{gap:16px 20px}
}

/* Phone. Buttons go full width, the display sizes come down, and the theme
   tiles finish collapsing to a single column. */
@media (max-width:640px){
  .nh-site{font-size:16px}
  .nh-site h1{font-size:clamp(1.95rem,7.4vw,2.6rem)}
  .nh-wrap{padding-inline:18px}
  .nh-nav{gap:20px}
  .nh-nav a{font-size:.92rem}
  /* Re-assert the tab gap: the .nh-nav rule above it is equally specific and
     later in the file, so without this the tabs would space out like links. */
  .nh-nav--tabs{gap:2px}
  .nh-nav--tabs a{padding:10px 11px}
  .nh-nav--tabs a::after{left:11px;right:11px}
  .nh-lede{font-size:1.05rem}
  .nh-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .nh-sw__hex{font-size:.72rem}
  .nh-status__card{padding:32px 24px}
  .nh-plan{padding:26px 22px}
  .nh-plan__price{font-size:2.6rem;min-height:0}
  /* Full width, and allowed to wrap, so a long label such as an email address
     cannot push the page into a horizontal scroll. */
  .nh-btns{gap:12px}
  .nh-btns .nh-btn{width:100%;white-space:normal;text-align:center}
  .nh-band,.nh-shots,.nh-pricing,.nh-faq,.nh-cta{padding:var(--nh-md) 0 var(--nh-lg)}
  /* The form is the page's one action here, so it takes the full column and so
     does its button. Fields keep a 16px font size: anything smaller and iOS
     Safari zooms the viewport the moment one is focused. */
  .nh-form{max-width:none}
  .nh-form__submit{align-self:stretch}
  .nh-input{font-size:16px}
  .nh-outcome{max-width:none;padding:18px 20px}
  .nh-themes__note{margin-bottom:var(--nh-sm)}
}

@media (max-width:480px){
  .nh-grid--six{grid-template-columns:minmax(0,1fr)}
  /* One column wide, so the chip is a full width band and can afford height.
     82px across a whole phone width read as a letterbox. */
  .nh-grid--six .nh-sw__chip{height:112px}
  .nh-foot__links{flex-direction:column;gap:12px}
  .nh-foot__contact{max-width:none}
}

/* Reduced motion (narrowed 2026-09-09): decorative motion stops, click/hover motion stays. */
@media (prefers-reduced-motion:reduce){
  .nh-themes__stage,.nh-themes__stage *,.nh-reveal{transition:none !important;animation:none !important}
  .nh-js .nh-reveal{opacity:1;transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
}


/* =========================================================================
   PRE-LAUNCH SURFACES
   Added 2026-08-21 with the pre-launch rewrite. Two jobs, both of which the
   existing components could not do without being bent out of shape.
   ========================================================================= */

/* ---------- launch offer bar ----------
   Sits ABOVE the sticky header rather than inside it, so it is the first thing
   on the page and then gets out of the way. Putting it inside .nh-head would
   have made the sticky bar two lines tall on every scroll, and the anchors'
   scroll-margin is tuned to that bar's two real heights. */
.nh-offer{border-bottom:1px solid var(--nh-line);background:var(--nh-surface)}
.nh-offer .nh-wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding-block:11px}
.nh-offer__tag{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--nh-accent);flex:0 0 auto}
.nh-offer__text{margin:0;max-width:none;font-size:.95rem;color:var(--nh-ink)}
.nh-offer__text span{color:var(--nh-muted)}

/* ---------- in-page offer callout ----------
   The one place a panel earns an accent stroke outside the featured plan: it is
   a real boundary around a real, time-bound thing, directly above the plan grid
   it applies to. */
.nh-callout{border:1px solid var(--nh-accent);border-radius:var(--nh-r-md);background:var(--nh-surface);padding:22px 24px;margin:0 0 var(--nh-md);max-width:none}
.nh-callout h3{margin-bottom:8px}
.nh-callout p{color:var(--nh-muted);font-size:1rem;max-width:74ch}
.nh-callout p + p{margin-top:9px}
.nh-callout strong{color:var(--nh-ink);font-weight:600}

/* ---------- a term-and-value requirement list ----------
   Distinct from .nh-row on purpose: a spec is a LOOKUP (what does it want for
   memory?), not a paragraph with a heading, and forcing it into .nh-row makes
   the reader hunt the number inside prose. Two columns on desktop, stacked on
   narrow, hairline separated like everything else. */
.nh-specs{padding:var(--nh-lg) 0;border-top:1px solid var(--nh-line)}
.nh-specs h2{margin-bottom:var(--nh-sm)}
.nh-spec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:8px 56px;padding:20px 0;border-top:1px solid var(--nh-line)}
.nh-spec:first-of-type{border-top:0;padding-top:var(--nh-xs)}
.nh-spec__term{font-family:var(--nh-display);font-weight:700;font-size:1.02rem;letter-spacing:-0.01em;color:var(--nh-ink)}
.nh-spec__val{color:var(--nh-ink);font-size:1rem;max-width:66ch}
.nh-spec__val strong{font-weight:600}
.nh-spec__note{display:block;margin-top:7px;color:var(--nh-muted);font-size:.94rem}

/* ---------- tier switcher ----------
   Three sibling pages need a way between them that is not a nav item and not a
   buy button. A hairline strip of links, current one marked. */
.nh-switch{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--nh-sm)}
.nh-switch a,.nh-switch span{font-size:.9rem;padding:7px 16px;border-radius:var(--nh-r-pill);border:1px solid var(--nh-line);color:var(--nh-muted)}
.nh-switch a:hover{border-color:var(--nh-line-hi);color:var(--nh-ink);text-decoration:none}
.nh-switch span{border-color:var(--nh-accent);color:var(--nh-ink)}

@media (max-width:980px){
  .nh-spec{grid-template-columns:1fr;gap:6px}
  .nh-spec__val{max-width:none}
}
@media (max-width:640px){
  .nh-offer .nh-wrap{gap:2px 10px}
  .nh-offer__text{font-size:.9rem}
  .nh-callout{padding:18px 18px}
}

/* ---------------------------------------------------------------------------
   Monochrome (2026-09-08). The resting site has no hue: the palette above is
   greys, the accent role is the ink itself, and the only graphic is one thin-
   line figure behind the hero. The theme showcase's hover previews keep their
   colour on purpose: they are the product's own shipped palettes, shown as the
   feature being sold, and they revert on mouse out.
   --------------------------------------------------------------------------- */
.nh-brand__mark{filter:grayscale(1)}
.nh-hero{position:relative;overflow:hidden}
.nh-hero .nh-wrap{position:relative}
.nh-hero__copy,.nh-hero__shot{position:relative;z-index:1}
.nh-hero__art{position:absolute;right:-6%;top:-14%;width:58%;max-width:760px;color:var(--nh-ink);opacity:.22;pointer-events:none;z-index:0}
.nh-hero__art svg{display:block;width:100%;height:auto}
/* The emphasised word in the headline is italic, not coloured. */
.nh-accent{color:var(--nh-ink);font-style:italic}
/* Links say link with an underline, since there is no colour to say it. */
.nh-site p a:not(.nh-btn),.nh-site li a:not(.nh-btn){text-decoration:underline;text-underline-offset:.16em}
@media (max-width:980px){.nh-hero__art{opacity:.12;width:80%;right:-20%;top:-6%}}
/* The six theme tiles carry the product's real palettes as swatch chips. At rest
   they are the only colour on a black-and-white page, so at rest they are grey;
   the pointer reveals the theme, which is what the showcase is for. Touch has
   no rest/hover pair, so it keeps the colour. */
@media (hover:hover) and (pointer:fine){
  .nh-themes .nh-sw{filter:grayscale(1);transition:filter .2s ease}
  .nh-themes .nh-sw:hover,.nh-themes .nh-sw:focus-within{filter:none}
}
@media (prefers-reduced-motion:reduce){.nh-themes .nh-sw{transition:none}}
/* The closing band's small figure: the hero's mark, once more, quietly. */
.nh-cta .nh-wrap{position:relative}
.nh-cta__art{width:96px;margin:0 auto 18px;color:var(--nh-ink);opacity:.32;pointer-events:none}
.nh-cta__art svg{display:block;width:100%;height:auto}
/* ---------------------------------------------------------------------------
   Dove (2026-09-08, second pass). Fewer words, more air: the palette is black,
   two charcoals, warm dove greys and a dove-white ink with pure white held for
   the one primary button. The display sizes step up and the weight steps down,
   sections breathe at 128px, the feature band is six one-line statements in
   two columns, and the theme tiles drop their hex strings.
   --------------------------------------------------------------------------- */
.nh-band,.nh-shots,.nh-pricing,.nh-faq,.nh-cta{padding-top:128px;padding-bottom:128px}
.nh-hero{padding-top:96px;padding-bottom:96px}
:where(.nh-site) h1{font-weight:500;letter-spacing:-.025em;line-height:1.02;font-size:clamp(2.6rem,6vw,4.6rem)}
:where(.nh-site) h2{font-weight:500;letter-spacing:-.02em;line-height:1.08;font-size:clamp(1.8rem,3.6vw,2.7rem)}
:where(.nh-site) h3{font-weight:500;letter-spacing:-.005em}
.nh-lede{color:var(--nh-support);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:30ch}
.nh-hero__note{color:var(--nh-muted);letter-spacing:.02em}
.nh-hero__art{opacity:.16}
/* Six one-line statements, two columns, a hairline above each. */
.nh-band--terse .nh-band__head{margin-bottom:var(--nh-lg)}
.nh-rows--terse{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--nh-lg);row-gap:0}
.nh-rows--terse .nh-row{padding:22px 0;border-top:1px solid var(--nh-line);margin:0}
.nh-rows--terse .nh-row h3{font-size:1.15rem;line-height:1.35;margin:0;color:var(--nh-ink)}
.nh-rows--terse .nh-row h3 a{color:var(--nh-support)}
.nh-cap{color:var(--nh-muted);font-size:.9rem;letter-spacing:.01em}
.nh-sw__hex{display:none}
.nh-sw__name{color:var(--nh-ink)}
.nh-themes__note{color:var(--nh-support);max-width:56ch}
.nh-spec__term a{color:var(--nh-ink);text-decoration:none;font-weight:500}
.nh-spec__val{color:var(--nh-support)}
.nh-spec__val strong{color:var(--nh-ink);font-weight:500}
.nh-fineprint{color:var(--nh-muted)}
.nh-faq__grid{column-gap:var(--nh-lg)}
.nh-q h3{font-size:1.05rem}
.nh-q p{color:var(--nh-support)}
.nh-cta h2{font-size:clamp(2rem,4.5vw,3.4rem)}
.nh-cta p{color:var(--nh-support)}
.nh-btn--primary{background:var(--nh-accent-hi);color:var(--nh-on-accent);border-color:var(--nh-accent-hi)}
.nh-btn--primary:hover{background:var(--nh-accent)}
.nh-btn--ghost{border-color:var(--nh-line-hi);color:var(--nh-ink)}
.nh-btn--ghost:hover{border-color:var(--nh-support)}
@media (max-width:720px){.nh-rows--terse{grid-template-columns:1fr}.nh-band,.nh-shots,.nh-pricing,.nh-faq,.nh-cta{padding-top:88px;padding-bottom:88px}}
/* ---------------------------------------------------------------------------
   Footer in columns (2026-09-08). The one row of nine links became four short
   lists under quiet headings: Product, Help, Legal, Developer. The brand block
   keeps the left; the columns take the rest and fold to two, then one.
   --------------------------------------------------------------------------- */
.nh-foot .nh-wrap{display:grid;grid-template-columns:minmax(220px,1.1fr) 2.4fr;gap:var(--nh-lg);align-items:start}
.nh-foot__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--nh-md) var(--nh-lg)}
.nh-foot__col h4{margin:0 0 10px;font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--nh-muted)}
.nh-foot__col a{display:block;color:var(--nh-support);text-decoration:none;font-size:.95rem;line-height:1.4;padding:4px 0}
.nh-foot__col a:hover{color:var(--nh-ink)}
.nh-foot__contact{margin-top:var(--nh-sm)}
@media (max-width:980px){.nh-foot .nh-wrap{grid-template-columns:1fr}.nh-foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.nh-foot__cols{grid-template-columns:1fr}}
/* Three columns since 2026-09-08 (Developer and Themes dropped). */
.nh-foot__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.nh-foot__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.nh-foot__cols{grid-template-columns:1fr}}

/* Sign in / create account (2026-09-08): the form alone, centred, no aside. */
.nh-auth{display:block;max-width:440px}
.nh-auth__form{max-width:440px}

/* Sign in / create account forms (2026-09-09). The sign-in form is WordPress's
   own wp_login_form markup (login-username / .input / .button), which none of
   the .nh-field rules touch, so it rendered raw. Style the auth forms by
   structure, whatever markup they carry. */
.nh-auth__form form{display:flex;flex-direction:column;gap:18px;max-width:440px}
.nh-auth__form form p{margin:0;display:flex;flex-direction:column;gap:7px}
.nh-auth__form form label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--nh-muted)}
.nh-auth__form input[type=text],.nh-auth__form input[type=password],.nh-auth__form input[type=email]{font-family:var(--nh-font);font-size:16px;line-height:1.5;color:var(--nh-ink);background:var(--nh-surface);border:1px solid var(--nh-line);border-radius:var(--nh-r-sm);padding:12px 14px;width:100%;box-sizing:border-box}
.nh-auth__form input[type=text]:hover,.nh-auth__form input[type=password]:hover,.nh-auth__form input[type=email]:hover{border-color:var(--nh-line-hi)}
.nh-auth__form input[type=text]:focus,.nh-auth__form input[type=password]:focus,.nh-auth__form input[type=email]:focus{border-color:var(--nh-accent);outline:none}
.nh-auth__form .login-remember label{flex-direction:row;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-weight:400;font-size:.95rem;color:var(--nh-support);display:flex}
.nh-auth__form input[type=checkbox]{width:16px;height:16px;accent-color:var(--nh-accent-hi)}
.nh-auth__form input[type=submit],.nh-auth__form button[type=submit]{align-self:flex-start;font-family:var(--nh-font);font-size:1rem;font-weight:500;padding:12px 22px;border-radius:var(--nh-r-pill);background:var(--nh-accent-hi);color:var(--nh-on-accent);border:1px solid var(--nh-accent-hi);cursor:pointer}
.nh-auth__form input[type=submit]:hover,.nh-auth__form button[type=submit]:hover{background:var(--nh-accent)}
.nh-auth__form .nh-form__note{margin-top:14px;color:var(--nh-muted);font-size:.9rem}
/* The Free card is a two-card stack (2026-09-09): a small tab sticks out of its top edge; pointing at it swaps in the Pocket Edition card and the tab then reads Free. */
.nh-plan-stack{position:relative}
.nh-plan-stack .nh-plan{margin-top:0}
.nh-plan__tab{position:absolute;top:-15px;right:22px;z-index:2;padding:6px 14px;border-radius:var(--nh-r-pill);border:1px solid var(--nh-line-hi);background:var(--nh-surface2);color:var(--nh-support);font:inherit;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;line-height:1.2}
.nh-plan__tab:hover{border-color:var(--nh-support);color:var(--nh-ink)}
.nh-plan__tab--free{display:none}
.nh-plan-stack.is-pocket .nh-plan__tab--pocket{display:none}
.nh-plan-stack.is-pocket .nh-plan__tab--free{display:inline}

/* Auth pages centred (2026-09-09): a lone form at the left of a 1080px wrap read as squashed. */
.nh-page:has(.nh-auth) .nh-page__head{max-width:520px;margin:0 auto;text-align:center}
.nh-auth{display:block;max-width:520px;margin:32px auto 0}
.nh-auth__form,.nh-auth__form form{max-width:none}
.nh-auth__form input[type=submit],.nh-auth__form button[type=submit]{align-self:stretch;text-align:center}
.nh-auth__form .nh-form__note{text-align:center}

/* The Free deck (2026-09-09, third take): the two cards circle each other.
   Click the back card's head and it orbits out to the left, around, and
   settles in front, while the front card orbits out to the right and drops
   behind: one carousel turn, .9 s, both cards moving the whole time. */
.nh-plan-stack{position:relative;margin-top:28px;perspective:1400px}
.nh-plan-stack.is-busy{z-index:5}
.nh-plan-stack .nh-plan{margin-top:0;will-change:transform,filter;backface-visibility:hidden}
.nh-plan-stack .nh-plan.is-front{position:relative;z-index:2}
.nh-plan-stack .nh-plan.is-back{position:absolute;inset:0;z-index:1;transform:translate3d(0,-28px,0) scale(.97);transform-origin:center;cursor:pointer;filter:brightness(.8);transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .35s !important}
.nh-plan-stack .nh-plan.is-back:hover{filter:brightness(.9);transform:translate3d(0,-36px,0) scale(.975)}
.nh-plan-stack .nh-plan.is-back:focus-visible{outline:2px solid var(--nh-accent-hi);outline-offset:2px}
.nh-plan__tab{display:none}
@keyframes nh-orbit-front{0%{transform:translate3d(0,-28px,0) scale(.97) rotateY(0);filter:brightness(.8)}35%{transform:translate3d(-52%,-8px,60px) scale(.96) rotateY(22deg);filter:brightness(.9)}65%{transform:translate3d(-30%,26px,120px) scale(1.02) rotateY(10deg);filter:brightness(1)}100%{transform:translate3d(0,0,0) scale(1) rotateY(0);filter:brightness(1)}}
@keyframes nh-orbit-back{0%{transform:translate3d(0,0,0) scale(1) rotateY(0);filter:brightness(1)}35%{transform:translate3d(52%,22px,-60px) scale(.99) rotateY(-22deg);filter:brightness(.92)}65%{transform:translate3d(30%,-14px,-120px) scale(.97) rotateY(-10deg);filter:brightness(.84)}100%{transform:translate3d(0,-28px,0) scale(.97) rotateY(0);filter:brightness(.8)}}
.nh-plan-stack .nh-plan.nh-to-front{animation:nh-orbit-front .9s cubic-bezier(.65,0,.35,1) both !important;transition:none}
.nh-plan-stack .nh-plan.nh-to-back{animation:nh-orbit-back .9s cubic-bezier(.65,0,.35,1) both !important;transition:none}
/* The !important on the deck: style.css line ~690 has a GLOBAL reduced-motion rule (.nh-site * {animation:none !important}) and Windows boxes with animations off report reduced motion; the deck must outrank it. No reduced-motion cut here on purpose: the turn only runs when the visitor clicks the card, and Windows boxes with animations switched off report reduced motion. */

/* =========================================================================
   MOTION (2026-09-09). Only transform, opacity and a short blur; every piece
   is composited, runs once, and is under 600 ms. Nothing loops.
   ========================================================================= */
/* Page to page: the old page slides left and blurs out, the new one slides
   in from the right; the offer bar and header stay put. Cross-document View
   Transitions (Chromium 126+, Safari 18.2+); other browsers just navigate. */
/* Page slide + scroll reveal are desktop-only (2026-09-09): on phones the hidden-until-scrolled blocks read as a black page after a tap. */
@media (min-width:761px) and (hover:hover){@view-transition{navigation:auto}}
.nh-offer{view-transition-name:nh-offer}
.nh-head{view-transition-name:nh-head}
::view-transition-group(nh-offer),::view-transition-group(nh-head){animation-duration:0s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.34s;animation-timing-function:cubic-bezier(.3,0,.2,1);animation-fill-mode:both;will-change:transform,opacity,filter}
::view-transition-old(root){animation-name:nh-page-out}
::view-transition-new(root){animation-name:nh-page-in}
@keyframes nh-page-out{to{transform:translateX(-12%);opacity:0;filter:blur(5px)}}
@keyframes nh-page-in{from{transform:translateX(12%);opacity:0;filter:blur(5px)}}
/* Going back (browser back button) runs the same slide the other way. */
html.nh-back::view-transition-old(root){animation-name:nh-page-out-back}
html.nh-back::view-transition-new(root){animation-name:nh-page-in-back}
@keyframes nh-page-out-back{to{transform:translateX(12%);opacity:0;filter:blur(5px)}}
@keyframes nh-page-in-back{from{transform:translateX(-12%);opacity:0;filter:blur(5px)}}
/* Scroll reveal: blocks below the fold rise 18 px as they enter. Only with
   JS on (html.nh-js) so nothing is ever hidden without it. */
.nh-js .nh-reveal{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.2,.6,.2,1),transform .55s cubic-bezier(.2,.6,.2,1)}
.nh-js .nh-reveal.is-in{opacity:1;transform:none}
/* Hover lift on cards and tiles; buttons press in. The deck keeps its own transforms. */
.nh-plan:not(.nh-plan-stack .nh-plan),.nh-q,.nh-shots__grid>div{transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s ease}
.nh-plan:not(.nh-plan-stack .nh-plan):hover{transform:translateY(-4px);border-color:var(--nh-line-hi)}
.nh-shots__grid>div:hover{transform:translateY(-3px)}
.nh-btn:active{transform:scale(.97)}
.nh-btn--primary:hover{transform:translateY(-1px)}
.nh-nav--tabs a{transition:color .18s ease}

/* Admin-only Dashboard button beside the header CTA (2026-09-09). */
.nh-head__cta{display:flex;align-items:center;gap:10px}

/* =========================================================================
   MERCH SHOP (2026-09-09). WooCommerce classic loop + block cart/checkout,
   restyled onto the site's tokens. Nothing here touches non-shop pages.
   ========================================================================= */
.nh-shop .woocommerce-notices-wrapper:empty{display:none}
.nh-shop .woocommerce-result-count,.nh-shop .woocommerce-ordering{color:var(--nh-muted);font-size:.9rem;margin:0 0 18px}
.nh-shop .woocommerce-ordering select{background:var(--nh-surface);color:var(--nh-ink);border:1px solid var(--nh-line);border-radius:var(--nh-r-sm);padding:8px 12px;font:inherit}
.nh-shop ul.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;margin:0;padding:0}
@media (max-width:900px){.nh-shop ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.nh-shop ul.products{grid-template-columns:minmax(0,1fr)}}
.nh-shop ul.products li.product{background:var(--nh-surface);border:1px solid var(--nh-line);border-radius:var(--nh-r-md);padding:18px;display:flex;flex-direction:column;gap:10px;transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s ease;margin:0;width:auto;float:none}
.nh-shop ul.products li.product:hover{transform:translateY(-4px);border-color:var(--nh-line-hi)}
.nh-shop ul.products li.product img{width:100%;height:auto;border-radius:var(--nh-r-sm);background:var(--nh-photo);display:block}
.nh-shop ul.products li.product .woocommerce-loop-product__title{font-size:1.08rem;font-weight:600;color:var(--nh-ink);margin:6px 0 0;padding:0}
.nh-shop ul.products li.product .price{color:var(--nh-support);font-size:1rem;margin:0}
.nh-shop ul.products li.product .price ins{text-decoration:none}
.nh-shop ul.products li.product .button{align-self:flex-start;margin-top:auto}
.nh-shop .button,.nh-shop button.button,.nh-shop .single_add_to_cart_button,.nh-shop .wc-block-components-button,.nh-shop .checkout-button{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:var(--nh-r-pill);font-family:var(--nh-font);font-size:1rem;font-weight:600;background:var(--nh-accent-hi);color:var(--nh-on-accent);border:1px solid var(--nh-accent-hi);cursor:pointer;text-decoration:none;line-height:1.2}
.nh-shop .button:hover,.nh-shop .single_add_to_cart_button:hover,.nh-shop .wc-block-components-button:hover{background:var(--nh-accent);border-color:var(--nh-accent);color:var(--nh-on-accent)}
.nh-shop .button.disabled,.nh-shop .button:disabled{opacity:.45;cursor:not-allowed}
.nh-crumb{margin:0 0 18px}.nh-crumb a{color:var(--nh-muted);text-decoration:none}.nh-crumb a:hover{color:var(--nh-ink)}
/* Single product */
.nh-shop--single .product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:820px){.nh-shop--single .product{grid-template-columns:minmax(0,1fr);gap:28px}}
.nh-shop--single .woocommerce-product-gallery{margin:0}
.nh-shop--single .woocommerce-product-gallery img{border-radius:var(--nh-r-md);background:var(--nh-photo);width:100%;height:auto}
.nh-shop--single .woocommerce-product-gallery__wrapper{margin:0}
.nh-shop--single .flex-control-thumbs{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:10px 0 0}
.nh-shop--single .flex-control-thumbs li{width:72px;margin:0}
.nh-shop--single .flex-control-thumbs img{border-radius:var(--nh-r-sm);opacity:.6;cursor:pointer;border:1px solid var(--nh-line)}
.nh-shop--single .flex-control-thumbs img.flex-active,.nh-shop--single .flex-control-thumbs img:hover{opacity:1;border-color:var(--nh-line-hi)}
.nh-shop--single .product_title{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.08;margin:0 0 10px}
.nh-shop--single .summary .price{font-family:var(--nh-display);font-size:1.7rem;font-weight:600;color:var(--nh-ink);margin:0 0 14px}
.nh-shop--single .woocommerce-product-details__short-description{color:var(--nh-support)}
.nh-shop--single table.variations{width:100%;border-collapse:collapse;margin:18px 0}
.nh-shop--single table.variations th,.nh-shop--single table.variations td{padding:8px 0;text-align:left;border:0;vertical-align:middle}
.nh-shop--single table.variations th{width:90px;color:var(--nh-muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.nh-shop--single table.variations select,.nh-shop--single .quantity .qty{background:var(--nh-surface);color:var(--nh-ink);border:1px solid var(--nh-line);border-radius:var(--nh-r-sm);padding:10px 12px;font:inherit;min-width:160px}
.nh-shop--single .reset_variations{color:var(--nh-muted);font-size:.85rem;margin-left:10px}
.nh-shop--single .woocommerce-variation-price{margin:6px 0 14px}
.nh-shop--single form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:8px 0 22px}
.nh-shop--single form.cart .variations,.nh-shop--single form.cart .single_variation_wrap{flex-basis:100%}
.nh-shop--single .woocommerce-variation-add-to-cart{display:flex;gap:12px;align-items:center}
.nh-shop--single .quantity .qty{width:82px;min-width:0;text-align:center}
.nh-shop--single .product_meta{color:var(--nh-muted);font-size:.85rem;border-top:1px solid var(--nh-line);padding-top:14px}
.nh-shop--single .product_meta a{color:var(--nh-support)}
.nh-shop--single .woocommerce-tabs{grid-column:1 / -1;margin-top:36px;border-top:1px solid var(--nh-line);padding-top:24px}
.nh-shop--single .woocommerce-tabs ul.tabs{display:none}
.nh-shop--single .woocommerce-tabs .panel h2:first-child{display:none}
.nh-shop--single .woocommerce-tabs .panel{max-width:70ch;color:var(--nh-support)}
.nh-shop--single .woocommerce-tabs .panel p{margin:0 0 14px}
.nh-shop--single .woocommerce-tabs .panel ul{padding-left:20px;margin:0 0 14px}
.nh-shop--single .woocommerce-tabs .panel li{margin:4px 0}
.nh-shop--single .related.products,.nh-shop--single .upsells.products{grid-column:1 / -1;margin-top:48px}
.nh-shop--single .related.products>h2{font-size:1.4rem;margin-bottom:16px}
.nh-shop .woocommerce-message,.nh-shop .woocommerce-info,.nh-shop .woocommerce-error{background:var(--nh-surface);border:1px solid var(--nh-line-hi);border-radius:var(--nh-r-sm);padding:14px 18px;color:var(--nh-ink);margin:0 0 20px;list-style:none}
.nh-shop .woocommerce-message .button{float:right;margin-left:12px;padding:8px 16px;font-size:.9rem}
/* Cart + checkout blocks: repaint the block components onto the tokens. */
.nh-shop--cart .nh-page__head,.nh-shop--checkout .nh-page__head{margin-bottom:24px}
.nh-shop .wc-block-components-sidebar-layout{gap:32px}
.nh-shop .wc-block-components-product-name,.nh-shop .wc-block-components-totals-item,.nh-shop .wc-block-components-totals-footer-item,.nh-shop .wc-block-cart-item__total,.nh-shop .wc-block-components-checkout-step__title,.nh-shop .wc-block-components-title,.nh-shop .wc-block-components-radio-control__label,.nh-shop .wc-block-components-checkbox__label,.nh-shop .wc-block-components-order-summary-item__description{color:var(--nh-ink)}
.nh-shop .wc-block-cart-item__prices,.nh-shop .wc-block-components-product-metadata,.nh-shop .wc-block-components-checkout-step__description,.nh-shop .wc-block-components-totals-item__description,.nh-shop .wc-block-components-shipping-rates-control__package,.nh-shop .wc-block-components-radio-control__description{color:var(--nh-muted)}
.nh-shop .wc-block-cart .wc-block-cart-items th,.nh-shop .wc-block-cart-items__row,.nh-shop .wc-block-components-totals-item,.nh-shop .wc-block-components-checkout-step,.nh-shop .wc-block-components-order-summary{border-color:var(--nh-line)!important}
.nh-shop .wc-block-cart-items__row img,.nh-shop .wc-block-components-order-summary-item__image img{border-radius:var(--nh-r-sm);background:var(--nh-photo)}
.nh-shop .wc-block-components-text-input input,.nh-shop .wc-block-components-text-input textarea,.nh-shop .wc-block-components-country-input .components-combobox-control__input,.nh-shop .wc-block-components-state-input select,.nh-shop .wc-block-components-select select,.nh-shop .wc-block-components-combobox input,.nh-shop .wc-block-components-quantity-selector{background:var(--nh-surface)!important;color:var(--nh-ink)!important;border-color:var(--nh-line)!important;border-radius:var(--nh-r-sm)!important}
.nh-shop .wc-block-components-text-input label,.nh-shop .wc-block-components-combobox label,.nh-shop .wc-block-components-select label{color:var(--nh-muted)!important}
.nh-shop .wc-block-components-text-input.is-active label,.nh-shop .wc-block-components-text-input input:focus{border-color:var(--nh-accent)!important}
.nh-shop .wc-block-components-quantity-selector input,.nh-shop .wc-block-components-quantity-selector button{color:var(--nh-ink)!important;background:transparent!important}
.nh-shop .wc-block-components-sidebar{background:var(--nh-surface);border:1px solid var(--nh-line);border-radius:var(--nh-r-md);padding:20px}
.nh-shop .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-size:1.4rem;font-weight:600}
.nh-shop .wc-block-components-button.wc-block-cart__submit-button,.nh-shop .wc-block-components-checkout-place-order-button{width:100%;border-radius:var(--nh-r-pill)}
.nh-shop .wc-block-components-button:not(.is-link){background:var(--nh-accent-hi)!important;color:var(--nh-on-accent)!important;border-radius:var(--nh-r-pill)!important}
.nh-shop .wc-block-components-button.is-link,.nh-shop .wc-block-components-product-name,.nh-shop a{color:var(--nh-ink)}
.nh-shop .wc-block-components-express-payment,.nh-shop .wc-block-components-express-payment-continue-rule{color:var(--nh-muted)}
.nh-shop .wc-block-components-express-payment__title-container>span{background:var(--nh-bg)}
.nh-shop .wc-block-components-express-payment__event-buttons{border-color:var(--nh-line)}
.nh-shop .wc-block-components-payment-method-label,.nh-shop .wc-block-components-checkout-payment-methods__label{color:var(--nh-ink)}
.nh-shop .wc-block-components-radio-control__option{border-color:var(--nh-line)!important;background:var(--nh-surface)}
.nh-shop .wc-block-components-notice-banner{background:var(--nh-surface);border-color:var(--nh-line-hi);color:var(--nh-ink)}
.nh-shop .wc-block-cart__empty-cart__title{color:var(--nh-ink)}
.nh-shop .wp-block-woocommerce-cart.is-loading,.nh-shop .wp-block-woocommerce-checkout.is-loading{opacity:.5}
/* The pre-launch CTA band is not wanted under a shop page. */
.nh-shop .nh-cta{display:none}

/* MERCH SHOP fixes after the first screenshots (2026-09-09). */
.nh-shop ul.products::before,.nh-shop ul.products::after{display:none!important;content:none}
.nh-shop .woocommerce-breadcrumb,.nh-shop .woocommerce-products-header,.nh-shop .woocommerce-products-header__title{display:none!important}
.nh-shop .nh-page--shop .woocommerce{display:flex;flex-direction:column}
.nh-shop .nh-page--shop .woocommerce-result-count,.nh-shop .nh-page--shop .woocommerce-ordering{float:none;margin:0}
.nh-shop .nh-page--shop .woocommerce-ordering{align-self:flex-end;margin:-32px 0 18px}
.nh-shop .nh-page--shop ul.products{clear:both}
/* Single: kill WooCommerce's float layout so the grid owns the columns. */
.nh-shop--single .product>.woocommerce-product-gallery,.nh-shop--single .product>.summary,.nh-shop--single div.product div.images,.nh-shop--single div.product div.summary{float:none!important;width:100%!important;max-width:none!important;margin:0!important;opacity:1!important}
.nh-shop--single .woocommerce-product-gallery__wrapper,.nh-shop--single .woocommerce-product-gallery__image,.nh-shop--single .woocommerce-product-gallery__image a,.nh-shop--single .woocommerce-product-gallery__image img{width:100%!important;max-width:none!important;display:block}
.nh-shop--single .woocommerce-product-gallery__trigger{display:none}
.nh-shop--single .flex-control-thumbs{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:10px 0 0;padding:0;list-style:none;max-height:190px;overflow-y:auto}
.nh-shop--single .flex-control-thumbs li{width:auto!important;float:none!important;margin:0!important}
.nh-shop--single .flex-control-thumbs img{width:100%;height:auto;display:block}
.nh-shop--single table.variations select{-webkit-appearance:menulist;appearance:menulist;font-family:var(--nh-font);font-size:1rem;line-height:1.4;height:auto;color:var(--nh-ink);background-color:var(--nh-surface);width:100%;max-width:280px;letter-spacing:0}
.nh-shop--single table.variations select option{color:var(--nh-bg);background:var(--nh-photo)}
.nh-shop--single table.variations td{padding:8px 0}
.nh-shop--single .summary form.cart{display:block}
.nh-shop--single .single_variation_wrap .woocommerce-variation-add-to-cart{display:flex;gap:12px;align-items:center;margin-top:8px}
.nh-shop--single .single_add_to_cart_button{white-space:nowrap}
.nh-shop--single #wc-stripe-payment-request-wrapper,.nh-shop--single #wc-stripe-payment-request-button-separator,.nh-shop--single #wc-stripe-express-checkout-element,.nh-shop--single #wc-stripe-express-checkout-button-separator,.nh-shop--single .wc-stripe-express-checkout-wrapper{display:none!important}
.nh-shop--single .product_title{font-size:clamp(1.7rem,2.6vw,2.2rem)}
/* Empty cart + the block product grids. */
.nh-shop .wc-block-cart__empty-cart__title{color:var(--nh-ink);font-size:1.3rem}
.nh-shop .wp-block-button__link,.nh-shop .wc-block-grid__product-add-to-cart .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:var(--nh-r-pill);background:var(--nh-accent-hi);color:var(--nh-on-accent);font-weight:600;text-decoration:none;border:0}
.nh-shop .wp-block-button__link:hover{background:var(--nh-accent)}
.nh-shop .wc-block-grid__products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;padding:0;margin:0}
.nh-shop .wc-block-grid__product{background:var(--nh-surface);border:1px solid var(--nh-line)!important;border-radius:var(--nh-r-md);padding:18px;margin:0;max-width:none;width:auto;display:flex;flex-direction:column;gap:10px;text-align:left}
.nh-shop .wc-block-grid__product img{border-radius:var(--nh-r-sm);background:var(--nh-photo)}
.nh-shop .wc-block-grid__product-title,.nh-shop .wc-block-grid__product-title a{color:var(--nh-ink);text-decoration:none;font-size:1.08rem;font-weight:600;text-align:left}
.nh-shop .wc-block-grid__product-price{color:var(--nh-support);text-align:left}
.nh-shop .wc-block-grid__product-add-to-cart{margin-top:auto;text-align:left}
.nh-shop .wc-block-grid__product-add-to-cart .wp-block-button__link{font-size:.95rem;padding:10px 20px}
.nh-shop .wp-block-woocommerce-product-new h2,.nh-shop .wc-block-cart__empty-cart h2{font-size:1.4rem;margin:36px 0 16px;text-align:left}
@media (max-width:820px){.nh-shop .wc-block-grid__products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.nh-shop .wc-block-grid__products{grid-template-columns:minmax(0,1fr)}.nh-shop--single .flex-control-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* MERCH SHOP fixes 2 (2026-09-09): sidebar wrapped under the form because its padding pushed it past 35%. */
.nh-shop .wc-block-components-sidebar-layout{flex-wrap:nowrap!important;align-items:flex-start}
.nh-shop .wc-block-components-sidebar{box-sizing:border-box}
.nh-shop .wp-block-woocommerce-cart,.nh-shop .wp-block-woocommerce-checkout{max-width:none!important;width:100%}
.nh-shop .wc-block-components-address-form :is(input,select),.nh-shop .wc-block-components-combobox :is(input,select),.nh-shop .wc-block-components-combobox-control :is(input,select){background:var(--nh-surface)!important;color:var(--nh-ink)!important;border-color:var(--nh-line)!important}
.nh-shop .wc-block-components-combobox .components-combobox-control__suggestions-container,.nh-shop .components-form-token-field__suggestions-list{background:var(--nh-surface2);color:var(--nh-ink)}
.nh-shop .wc-block-cart__submit-button,.nh-shop .wc-block-cart__submit-container .wc-block-components-button{display:flex!important;width:100%;background:var(--nh-accent-hi)!important;color:var(--nh-on-accent)!important;border-radius:var(--nh-r-pill)!important;padding:14px 20px;font-weight:600}
.nh-shop .wc-block-cart__submit-container{position:static}
.nh-shop .wc-block-components-express-payment--cart{display:none}
.nh-shop--single .flex-control-thumbs{max-height:260px}

/* =========================================================================
   MOBILE LAYOUT (2026-09-09). Phones get their own shape: pill tabs that
   scroll, swipe-cards for the statements and the plans, a fixed bottom
   Download bar, tighter type, no page-slide, no scroll-reveal.
   ========================================================================= */
@media (max-width:760px){
  .nh-js .nh-reveal{opacity:1!important;transform:none!important;transition:none!important}
  :root{--nh-md:40px;--nh-lg:56px;--nh-xl:72px}
  .nh-wrap{padding-inline:20px}
  body.nh-site{font-size:16px;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  h1{font-size:clamp(2.3rem,10.5vw,3rem);letter-spacing:-.02em}
  h2{font-size:clamp(1.6rem,7vw,2rem)}
  /* Offer bar: one quiet line. */
  .nh-offer .nh-wrap{justify-content:center;gap:6px;padding-block:8px;flex-wrap:nowrap}
  .nh-offer__tag{display:none}
  .nh-offer__text{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Header: mark + admin button on top, a scrolling row of pill tabs under it. */
  .nh-head .nh-wrap{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0;padding-top:10px;padding-bottom:0;min-height:0}
  .nh-brand{grid-column:1}
  .nh-head__cta{grid-column:2;justify-self:end;margin:0}
  .nh-head__cta .nh-btn--primary{display:none}
  .nh-nav--tabs{grid-column:1 / -1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 20px 14px;margin:0 -20px;border-top:0;-webkit-overflow-scrolling:touch}
  .nh-nav--tabs::-webkit-scrollbar{display:none}
  .nh-nav--tabs a{padding:8px 15px;border:1px solid var(--nh-line);border-radius:999px;background:var(--nh-surface);color:var(--nh-support);font-size:.92rem;line-height:1.2;white-space:nowrap;flex:0 0 auto}
  .nh-nav--tabs a::after{display:none}
  .nh-nav--tabs a[aria-current="page"],.nh-nav--tabs a.is-active,.nh-nav--tabs a.current{background:var(--nh-ink);border-color:var(--nh-ink);color:var(--nh-bg)}
  /* Hero: centred, the screenshot as a framed card. */
  .nh-hero{padding:44px 0 40px;text-align:center}
  .nh-hero .nh-wrap{display:block}
  .nh-hero__art{display:none}
  .nh-hero__copy{max-width:none}
  .nh-hero .nh-lede{margin:14px auto 24px;max-width:26ch}
  .nh-btns{flex-direction:column;gap:10px}
  .nh-btn{width:100%}
  .nh-hero__note{margin-top:14px;font-size:.85rem}
  .nh-hero__shot{margin:30px 0 0}
  .nh-hero .nh-shot{border-radius:0;border:0;box-shadow:none}
  /* Statements: a swipe row of numbered cards. */
  .nh-band{padding-top:48px}
  .nh-band .nh-wrap{display:block}
  .nh-band__head{margin-bottom:20px}
  .nh-band__head h2::after{content:"Swipe";display:block;margin-top:8px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nh-muted);font-weight:500}
  .nh-rows--terse{display:flex;flex-direction:row;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 10px;scrollbar-width:none;counter-reset:nh;-webkit-overflow-scrolling:touch}
  .nh-rows--terse::-webkit-scrollbar{display:none}
  .nh-rows--terse .nh-row{flex:0 0 76vw;scroll-snap-align:start;border:1px solid var(--nh-line);border-radius:14px;padding:22px 20px 24px;background:var(--nh-surface);border-top:1px solid var(--nh-line)}
  .nh-rows--terse .nh-row::before{counter-increment:nh;content:"0" counter(nh);display:block;font-size:.72rem;letter-spacing:.14em;color:var(--nh-muted);margin-bottom:12px}
  .nh-rows--terse .nh-row h3{font-size:1.2rem;line-height:1.35}
  /* Screenshots: full width, one after another. */
  .nh-shots .nh-shots__grid{grid-template-columns:1fr;gap:26px}
  .nh-shots .nh-shot{border-radius:0;border:0}
  .nh-cap{font-size:.9rem}
  /* Themes: two-up tiles. */
  .nh-themes__head{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
  .nh-grid--six{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  .nh-sw{padding:12px}
  /* Home plan rows as cards. */
  .nh-pricing .nh-spec{grid-template-columns:1fr;gap:4px;border:1px solid var(--nh-line);border-radius:14px;padding:18px;background:var(--nh-surface);margin-top:12px}
  .nh-pricing .nh-spec__term{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nh-muted)}
  .nh-pricing .nh-spec__term a{color:inherit;text-decoration:none}
  /* Plans page: every card is a swipe card; the desktop deck is dissolved. */
  .nh-plans{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;max-width:none!important;margin:16px -20px 0!important;padding:8px 20px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:stretch}
  .nh-plans::-webkit-scrollbar{display:none}
  .nh-plans .nh-plan{flex:0 0 84vw;scroll-snap-align:center;margin-top:0}
  .nh-plan-stack{display:contents}
  .nh-plan-stack .nh-plan.is-back,.nh-plan-stack .nh-plan.is-front{position:static!important;inset:auto!important;transform:none!important;filter:none!important;cursor:auto;z-index:auto;transition:none;animation:none!important}
  .nh-plans+.nh-fineprint::before{content:"Swipe for more plans. ";color:var(--nh-muted)}
  /* Spec pages. */
  .nh-spec{grid-template-columns:1fr;gap:4px;padding:16px 0}
  .nh-spec__term{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nh-muted)}
  /* Closing band + footer. */
  .nh-cta{text-align:center}
  .nh-foot .nh-wrap{grid-template-columns:1fr;gap:28px}
  .nh-foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 16px}
  .nh-foot__col a{padding:4px 0;display:block}
  /* Fixed bottom bar with the two actions that matter. */
  .nh-mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:10px;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--nh-bg) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--nh-line)}
  .nh-mobile-cta .nh-btn{width:auto;flex:1 1 0;padding:13px 16px}
  body.page-id-20 .nh-mobile-cta,body.woocommerce-page .nh-mobile-cta,body.woocommerce-cart .nh-mobile-cta,body.woocommerce-checkout .nh-mobile-cta,body.single-product .nh-mobile-cta,body.page-id-50 .nh-mobile-cta,body.page-id-51 .nh-mobile-cta,body.page-id-49 .nh-mobile-cta,body.page-id-56 .nh-mobile-cta,body.page-id-40 .nh-mobile-cta{display:none}
  body.page-id-20.nh-site,body.woocommerce-page.nh-site,body.woocommerce-cart.nh-site,body.woocommerce-checkout.nh-site,body.single-product.nh-site,body.page-id-50.nh-site,body.page-id-51.nh-site,body.page-id-49.nh-site,body.page-id-56.nh-site,body.page-id-40.nh-site{padding-bottom:0}
  /* Shop on a phone. */
  .nh-shop ul.products{grid-template-columns:1fr!important}
  .nh-shop--single .flex-control-thumbs{grid-template-columns:repeat(5,minmax(0,1fr))}
  .nh-shop .wc-block-components-sidebar-layout{flex-wrap:wrap!important}
  /* Card deck hover lift is pointless on touch. */
  .nh-plan:hover,.nh-shots__grid>div:hover{transform:none}
}
@media (min-width:761px){.nh-mobile-cta{display:none}}

@media (max-width:760px){
  .nh-head .nh-wrap .nh-nav--tabs,.nh-head .nh-nav--tabs{padding:12px 20px 14px!important;margin:0 -20px!important;scroll-padding-inline:20px}
  .nh-head .nh-nav--tabs::after{content:'';flex:0 0 12px}
  .nh-rows--terse .nh-row{min-height:0;height:auto}
}

/* mobile spacing pass (2026-09-09): the desktop section air is too much on a phone. */
@media (max-width:760px){
  .nh-band,.nh-shots,.nh-themes,.nh-pricing,.nh-faq,.nh-cta,.nh-specs{padding:44px 0}
  .nh-page{padding:36px 0 48px}
  .nh-page__head{margin-bottom:22px}
  .nh-band{padding-bottom:24px}
  .nh-rows--terse{padding-bottom:6px}
  .nh-faq .nh-page__head+*,.nh-page__head+.nh-faq__list{margin-top:0}
}

/* nav row overflow fix (2026-09-09): a centred flex row that overflows loses its left edge. */
@media (max-width:760px){.nh-head .nh-nav--tabs{justify-content:flex-start!important;margin-left:-20px!important}.nh-head .nh-nav--tabs>a:first-child{margin-left:0}}

/* faq gap (mobile) */
@media (max-width:760px){.nh-page+.nh-faq,.nh-page+.nh-specs{padding-top:0}.nh-faq .nh-q:first-child{border-top:0;padding-top:0}}


/* 2026-09-30 (Bobby): the PureGlow mark is the brand and keeps its colour, like the theme
   previews do; the rest of the site stays monochrome. */
/* 2026-09-30: the mark is the app's orb (nh-deck.css); the PureGlow PNG rules are retired. */