/* ==========================================================================
   PSHH Plugins — theme styles
   Tokens first. Every colour / radius / space / weight used below comes from here.
   Colour + type tokens are the PSHH Digital family; layout follows the rise.ai reference.
   ========================================================================== */

:root {
  /* Brand (same values as pshhdigital) */
  --navy: #030326;
  --navy-2: #0d0d3a;
  --violet: #6a30c3;
  --violet-dark: #57289f;
  --violet-soft: #aa8cff;
  --lilac: #e7deff;
  --lilac-2: #f4f0ff;
  --white: #ffffff;
  --grey: #f5f5f7;
  --line: rgba(3, 3, 38, .12);
  --line-inv: rgba(255, 255, 255, .16);
  --muted: rgba(3, 3, 38, .68);
  --muted-inv: rgba(255, 255, 255, .72);
  --white-a06: rgba(255, 255, 255, .06);
  --white-glass: rgba(255, 255, 255, .86);
  --focus-ring: rgba(106, 48, 195, .12);
  --success: #0d7a38;
  --success-soft: #e7f4ec;
  --grey-badge: #8b8b95;
  --gold: #f5c451;
  --card-glass: rgba(255, 255, 255, .22);
  --card-line: rgba(255, 255, 255, .4);
  --violet-a20: rgba(106, 48, 195, .2);
  --danger: #d6336c;
  --danger-bg: #fde8ef;
  --danger-inv: #ff9cbd;
  --focus-ring-inv: rgba(170, 140, 255, .35);
  --ink-a14: rgba(3, 3, 38, .14);
  --ink-a40: rgba(3, 3, 38, .4);
  --preview: #fff4c2;
  --backdrop: rgba(3, 3, 38, .55);

  /* Type (same families and weights as pshhdigital) */
  --font-head: "Assistant", "IBM Plex Sans Hebrew", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Hebrew", "Assistant", system-ui, sans-serif;
  --fs-hero: clamp(2.6rem, 4.8vw, 4rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.1rem);
  --fs-h3: 1.5rem;
  --fs-lead: clamp(1.1rem, 1.4vw, 1.25rem);
  --fs-body: 1.125rem;
  --fs-small: .95rem;
  --fs-num: clamp(2.8rem, 5vw, 4.25rem);
  --fs-page: clamp(2.2rem, 4vw, 3.25rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-head: 700;

  /* Shape + space */
  --r-btn: 12px;
  --r-sm: 14px;
  --r-md: 24px;
  --r-lg: 40px;
  --r-pill: 999px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --read: 760px;
  --section: clamp(72px, 9vw, 128px);
  --gap: clamp(16px, 2vw, 24px);
  --header-h: 72px;
  --frame: clamp(10px, 2vw, 30px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 30px 80px -34px rgba(3, 3, 38, .22);
  --shadow-sm: 0 8px 30px -14px rgba(3, 3, 38, .18);
  --shadow-chip: 0 14px 34px -14px rgba(3, 3, 38, .28);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--navy);
  background: var(--white);
  direction: rtl;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--fw-head); line-height: 1.1; letter-spacing: -.015em; margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--violet); color: var(--white); }
:focus-visible { outline: 3px solid var(--violet-soft); outline-offset: 3px; border-radius: 6px; }
.ph { line-height: 1; }
.ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
/* WordPress and plugins print this class; WooCommerce's stylesheet hid it, and that stylesheet only loads on store pages now. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hl { color: var(--violet); }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--soft { background: var(--grey); }
.section--navy { background: var(--navy); color: var(--white); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 16px; top: 16px; z-index: 999; background: var(--white); padding: 10px 16px; border-radius: var(--r-sm); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons (rise.ai shape, PSHH colours) ---------- */
.btn {
  --bg: var(--violet); --fg: var(--white); --bd: var(--violet);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 14px 22px;
  border: 2px solid var(--bd); border-radius: var(--r-btn);
  background: var(--bg); color: var(--fg);
  font: var(--fw-semibold) 1.05rem/1.2 var(--font-body);
  cursor: pointer; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { --bg: var(--violet-dark); --bd: var(--violet-dark); }
.btn--outline { --bg: transparent; --fg: var(--navy); --bd: var(--navy); }
.btn--outline:hover { --bg: var(--navy); --fg: var(--white); --bd: var(--navy); }
.btn--dark { --bg: var(--navy); --bd: var(--navy); }
.btn--dark:hover { --bg: var(--violet); --bd: var(--violet); }
.btn--white { --bg: var(--white); --fg: var(--navy); --bd: var(--white); }
.btn--white:hover { --bg: var(--lilac); --bd: var(--lilac); }
.btn--sm { padding: 10px 18px; font-size: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: .5em; font-weight: var(--fw-semibold); color: var(--violet); }
.link-arrow i { transition: transform .4s var(--ease); }
.link-arrow:hover i { transform: translateX(-4px); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); }
.nav-shell { position: relative; display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); height: var(--header-h); }
.brand img { height: 24px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.nav > li > a, .nav > li > button { display: inline-flex; align-items: center; gap: 6px; height: var(--header-h); padding: 0; border: 0; background: none; cursor: pointer; color: var(--navy); font: var(--fw-medium) 1rem/1 var(--font-body); transition: color .25s; }
.nav > li > a:hover, .nav > li > button:hover, .has-mega:focus-within > button { color: var(--violet); }
.nav .caret { font-size: .75em; transition: transform .3s var(--ease); }
.has-mega:hover .caret, .has-mega:focus-within .caret { transform: rotate(180deg); }
.mega { position: absolute; top: 100%; inset-inline: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 6px; padding: 14px; border-radius: var(--r-md); background: var(--white); box-shadow: var(--shadow-chip); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; }
.mega--3 { --cols: 3; }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega a { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; padding: 16px; border-radius: var(--r-sm); transition: background .2s; }
.mega a:hover { background: var(--lilac-2); }
.mega i { grid-row: span 2; align-self: start; font-size: 1.75rem; color: var(--violet); }
.mega b { font: var(--fw-head) 1.1rem/1.2 var(--font-head); }
.mega span { color: var(--muted); font-size: var(--fs-small); line-height: 1.4; }
.nav-cta { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); margin-inline-start: auto; }
.nav-icon { display: grid; place-items: center; font-size: 1.85rem; transition: color .25s; }
.nav-icon:hover { color: var(--violet); }
.burger { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-btn); background: var(--lilac-2); color: var(--navy); font-size: 1.3rem; cursor: pointer; }
.drawer { display: none; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(32px, 5vw, 64px) clamp(40px, 5vw, 72px); }
.hero-grid { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.hero h1 { font-size: var(--fs-hero); margin-bottom: 24px; }
.hero-sub { font-size: var(--fs-lead); color: var(--muted); line-height: 1.6; max-width: 48ch; margin-bottom: 32px; }
.hero-note { margin-top: 28px; font-size: var(--fs-small); color: var(--muted); }

/* Hero animation: built in code, no image and no video */
.scene { position: relative; aspect-ratio: 1; border-radius: var(--r-md); background: linear-gradient(150deg, var(--lilac) 0%, var(--lilac-2) 55%, var(--white) 100%); isolation: isolate; }
.scene-glow { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; }
.scene-glow::before, .scene-glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); }
.scene-glow::before { width: 60%; height: 60%; top: -12%; inset-inline-start: -10%; background: var(--violet-soft); opacity: .45; animation: float-a 14s ease-in-out infinite alternate; }
.scene-glow::after { width: 50%; height: 50%; bottom: -10%; inset-inline-end: -8%; background: var(--white); opacity: .9; animation: float-b 18s ease-in-out infinite alternate; }
.mcard { position: absolute; top: 14%; inset-inline-start: 10%; width: 62%; aspect-ratio: 1.6; padding: 7% 7.5%; border-radius: var(--r-md); display: grid; align-content: space-between; color: var(--white); background: linear-gradient(135deg, var(--violet) 0%, var(--violet-soft) 120%); box-shadow: var(--shadow); transform: rotate(-5deg); animation: bob 7s ease-in-out infinite; }
.mcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--card-line); background: linear-gradient(120deg, var(--card-glass), transparent 45%); pointer-events: none; }
.mcard-top { display: flex; align-items: center; justify-content: space-between; font: var(--fw-semibold) clamp(.8rem, 1.2vw, 1rem)/1 var(--font-body); }
.mcard-top i { font-size: 1.6em; color: var(--gold); }
.mcard-pts { display: grid; gap: 2px; }
.mcard-pts b { font: var(--fw-head) clamp(2rem, 4vw, 3.25rem)/1 var(--font-head); direction: ltr; text-align: right; }
.mcard-pts span { font-size: clamp(.75rem, 1.1vw, .95rem); opacity: .85; }
.chips { position: absolute; inset-inline-end: -5%; bottom: 9%; width: 62%; display: grid; gap: 12px; justify-items: end; }
.chip { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: var(--r-sm); background: var(--white); box-shadow: var(--shadow-chip); font: var(--fw-medium) clamp(.8rem, 1.1vw, .95rem)/1.3 var(--font-body); opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.chip.is-in { opacity: 1; transform: none; }
.chip i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lilac-2); color: var(--violet); font-size: 1.25rem; flex: none; }
.chip b { display: block; font: var(--fw-head) 1.25em/1.1 var(--font-head); }
.chip--dark { background: var(--navy); color: var(--white); }
.chip--dark i { background: var(--white-a06); color: var(--violet-soft); }
.chip--violet { background: var(--violet); color: var(--white); }
.chip--violet i { background: var(--card-glass); color: var(--white); }
.coin { position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 3px var(--card-line); animation: bob 6s ease-in-out infinite; }
.coin--1 { top: 9%; inset-inline-end: 14%; animation-delay: -2s; }
.coin--2 { top: 52%; inset-inline-start: 6%; width: 6.5%; animation-delay: -4s; }
@keyframes bob { 50% { translate: 0 -10px; } }
@keyframes float-a { to { transform: translate(-12%, 14%) scale(1.15); } }
@keyframes float-b { to { transform: translate(10%, -12%) scale(.9); } }

/* ---------- Trust row ---------- */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding-block: 24px; }
.trust li { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.trust i { font-size: 1.4rem; color: var(--violet); }

/* ---------- Section head ---------- */
.head { display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 760px; }
.head--center { margin-inline: auto; text-align: center; justify-items: center; }
.head h2 { font-size: var(--fs-h2); }
.head p { font-size: var(--fs-lead); color: var(--muted); }

/* ---------- Side by side ---------- */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.split--flip .split-media { order: -1; }
.split h2 { font-size: var(--fs-h2); margin-bottom: 20px; }
.split h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: 16px; }
.split p { font-size: var(--fs-lead); color: var(--muted); max-width: 50ch; }
.split .actions { margin-top: 28px; }
.split-media img { width: 100%; border-radius: var(--r-md); }
.rows { display: grid; gap: clamp(56px, 8vw, 112px); }
.ticks { display: grid; gap: 10px; margin-top: 20px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks i { color: var(--violet); font-size: 1.3rem; margin-top: .2em; }

/* ---------- Cards grid ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.card { display: grid; align-content: start; gap: 10px; padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
.section--soft .card { border-color: transparent; }
.card i { font-size: 2.25rem; color: var(--violet); margin-bottom: 6px; }
.card h3 { font-size: var(--fs-h3); }
.card p { color: var(--muted); line-height: 1.55; }
/* Link card (home guides, 15-10): the title link covers the card; hover = the help list rule (violet border, arrow moves). */
.card--link { position: relative; grid-template-rows: auto auto 1fr auto; transition: border-color .3s var(--ease); }
.card--link:hover { border-color: var(--violet); }
.card--link h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card--link h3 a:focus-visible { outline: none; }
.card--link h3 a:focus-visible::after { outline: 2px solid var(--violet); outline-offset: 3px; }
.card-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--violet); font-weight: var(--fw-medium); }
.card .card-more i { font-size: 1.1rem; margin: 0; color: inherit; transition: transform .3s var(--ease); }
.card--link:hover .card-more i { transform: translateX(-5px); }
.logos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.logos li { padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); font: var(--fw-semibold) var(--fs-small)/1.2 var(--font-body); background: var(--white); }

/* ---------- Video ---------- */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(150deg, var(--lilac) 0%, var(--lilac-2) 60%, var(--white) 100%); display: grid; place-items: center; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { display: grid; justify-items: center; gap: 16px; border: 0; background: none; cursor: pointer; color: var(--navy); font: var(--fw-semibold) var(--fs-lead)/1.2 var(--font-head); }
.video-play i { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--white); color: var(--violet); font-size: 1.9rem; box-shadow: var(--shadow-chip); transition: transform .4s var(--ease); }
.video-play:hover i { transform: scale(1.08); }
/* Our own film: poster behind a light veil, label in a white pill so it reads on any frame */
.video--poster { background: var(--poster) center / cover no-repeat, var(--lilac); box-shadow: var(--shadow); }
.video--poster::before { content: ""; position: absolute; inset: 0; background: var(--ink-a14); }
.video--poster .video-play { position: relative; }
.video--poster .video-play span { padding: 10px 20px; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-chip); }
.video--poster.is-playing { background: var(--navy); }
.video--poster.is-playing::before { content: none; }
.video video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--navy); }
@media (max-width: 600px) {
  .video--poster .video-play { gap: 10px; font-size: var(--fs-small); }
  .video--poster .video-play i { width: 56px; height: 56px; font-size: 1.4rem; }
  .video--poster .video-play span { padding: 7px 14px; }
}

/* Integrations diagram: built in code */
.hub { direction: ltr; position: relative; aspect-ratio: 1.25; border-radius: var(--r-md); background: var(--grey); }
.hub svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub path { fill: none; stroke: var(--violet-a20); stroke-width: 2; stroke-dasharray: 5 7; animation: dash 16s linear infinite; }
.hub-core, .hub-node { position: absolute; translate: -50% -50%; display: grid; place-items: center; background: var(--white); box-shadow: var(--shadow-chip); }
.hub-core { top: 50%; left: 50%; width: 22%; aspect-ratio: 1; border-radius: var(--r-md); background: var(--violet); color: var(--white); font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.hub-node { padding: 10px 18px; border-radius: var(--r-pill); font: var(--fw-semibold) clamp(.8rem, 1.1vw, .95rem)/1 var(--font-body); white-space: nowrap; animation: bob 7s ease-in-out infinite; }
.hub-node:nth-of-type(odd) { animation-delay: -3s; }
.hub-node--1 { top: 18%; left: 18%; }
.hub-node--2 { top: 18%; left: 82%; }
.hub-node--3 { top: 50%; left: 12%; }
.hub-node--4 { top: 50%; left: 88%; }
.hub-node--5 { top: 82%; left: 18%; }
.hub-node--6 { top: 82%; left: 82%; }
@keyframes dash { to { stroke-dashoffset: -240; } }

/* ---------- Proof (dark) ---------- */
.proof { background: var(--navy); color: var(--white); }
.proof .head p, .proof .num span, .proof .quote figcaption span { color: var(--muted-inv); }
.proof .num { border-color: var(--line-inv); }
.proof .num b { color: var(--violet-soft); }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-bottom: clamp(40px, 5vw, 64px); }
.num { padding-inline-start: 24px; border-inline-start: 2px solid var(--violet-a20); }
.num b { display: block; font: var(--fw-head) var(--fs-num)/1 var(--font-head); color: var(--violet); direction: ltr; text-align: right; margin-bottom: 8px; }
.num span { color: var(--muted); }
.quote { margin: 0; display: grid; gap: 24px; max-width: 900px; }
.quote blockquote { margin: 0; font: var(--fw-semibold) clamp(1.2rem, 1.9vw, 1.6rem)/1.5 var(--font-head); }
.quote figcaption { display: grid; gap: 2px; }
.quote figcaption b { font-weight: var(--fw-semibold); }
.quote figcaption span { color: var(--muted); font-size: var(--fs-small); }

/* ---------- Pricing ---------- */
.pricing { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--gap); align-items: stretch; }
.price-card { display: grid; align-content: start; gap: 18px; padding: clamp(28px, 3vw, 44px); border-radius: var(--r-md); background: var(--white); border: 2px solid var(--violet); }
.price-card h3 { font-size: var(--fs-h3); }
.price { display: flex; align-items: baseline; gap: 10px; }
.price b { font: var(--fw-head) var(--fs-num)/1 var(--font-head); direction: ltr; }
.price span, .price-card small { color: var(--muted); }
.price-card small { font-size: var(--fs-small); }
.price-card .btn { width: 100%; }
.guarantee { display: flex; gap: 12px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.guarantee i { font-size: 1.6rem; color: var(--violet); flex: none; }
.includes { padding: clamp(28px, 3vw, 44px); border-radius: var(--r-md); background: var(--white); }
.includes h3 { font-size: var(--fs-h3); margin-bottom: 20px; }
.includes ul { columns: 2; column-gap: 32px; }
.includes li { display: flex; gap: 10px; align-items: flex-start; break-inside: avoid; padding-block: 6px; }
.includes i { color: var(--violet); font-size: 1.2rem; margin-top: .25em; }

/* ---------- Product page ---------- */
.phero { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.phero .price-card h2 { font-size: var(--fs-h3); }
.tour { display: grid; gap: 24px; justify-items: center; }
.tour-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tour-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--navy); font: var(--fw-medium) 1rem/1 var(--font-body); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.tour-tabs button i { font-size: 1.2em; color: var(--violet); transition: color .25s; }
.tour-tabs button[aria-selected="true"] { background: var(--violet); border-color: var(--violet); color: var(--white); }
.tour-tabs button[aria-selected="true"] i { color: var(--white); }
.tour-text { max-width: 60ch; text-align: center; color: var(--muted); font-size: var(--fs-lead); min-height: 3.3em; }
.tour-stage { width: 100%; border-radius: var(--r-md); overflow: hidden; background: var(--grey); display: grid; place-items: center; }
.tour-stage img { max-height: 760px; width: auto; transition: opacity .35s var(--ease); }
.tour-stage img.is-out { opacity: 0; }
.specs { display: grid; }
.specs li { display: flex; justify-content: space-between; gap: 24px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.specs span { color: var(--muted); }
.specs b { font-weight: var(--fw-semibold); }
.faq-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.faq { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); }
.section--soft .faq-item { border-color: transparent; }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; list-style: none; cursor: pointer; font: var(--fw-head) 1.2rem/1.3 var(--font-head); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; color: var(--violet); font: var(--fw-regular) 1.6rem/1 var(--font-body); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item > div { padding: 0 24px 22px; color: var(--muted); max-width: 70ch; }

/* ---------- Inner pages ---------- */
.page-head { border-bottom: 1px solid var(--line); padding-block: clamp(40px, 6vw, 80px); }
.page-head h1 { font-size: var(--fs-page); max-width: 22ch; }
.page-head p { margin-top: 16px; max-width: 62ch; font-size: var(--fs-lead); color: var(--muted); }
.page-head--form { border-bottom: 0; background: var(--grey); }
.page-head--form .faq-wrap { align-items: center; }
.page-head--form .ticks a:hover { color: var(--violet); }
.section--page { padding-block: clamp(48px, 6vw, 88px); }
.post-wrap { max-width: calc(var(--read) + 2 * var(--gutter)); }
.prose-wrap .prose { max-width: var(--read); }
.empty { color: var(--muted); }

.prose { font-size: var(--fs-body); line-height: 1.8; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top: 2em; scroll-margin-top: calc(var(--header-h) + 16px); }
.prose h3 { font-size: 1.4rem; margin-top: 1.6em; }
.prose h4 { font-size: 1.15rem; margin-top: 1.4em; }
.prose p { margin: 0; }
.prose a { color: var(--violet); text-decoration: underline; text-underline-offset: .15em; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--violet); }
.prose img, .prose video, .prose iframe { border-radius: var(--r-sm); }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: 8px; font-size: var(--fs-small); color: var(--muted); }
.prose blockquote { margin-inline: 0; padding: 20px 24px; border-radius: var(--r-sm); background: var(--grey); font-weight: var(--fw-medium); }
.prose code { padding: .1em .4em; border-radius: 6px; background: var(--grey); font-size: .9em; direction: ltr; unicode-bidi: isolate; }
.prose pre { padding: 18px; border-radius: var(--r-sm); background: var(--navy); color: var(--white); overflow-x: auto; direction: ltr; text-align: left; }
.prose pre code { padding: 0; background: none; }
/* Embedded tools inside page text (terms generator, snippet 16): their own CSS zeroes the margin, so the prose rhythm is set here. */
.prose > .pshh-tkg { margin-block: clamp(32px, 4vw, 48px); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th, .prose td { padding: 12px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.prose th { font-family: var(--font-head); font-weight: var(--fw-head); background: var(--grey); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }

/* ---------- Posts ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px) var(--gap); }
.post-card { display: grid; align-content: start; gap: 16px; }
.post-card-media { display: block; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: var(--grey); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { display: grid; gap: 8px; }
.post-card h3 { font-size: 1.3rem; line-height: 1.25; }
.post-card h3 a:hover { color: var(--violet); }
.post-card p { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.post-meta { color: var(--muted); font-size: var(--fs-small); }
.pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.pager .page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-btn); }
.pager .current { background: var(--violet); border-color: var(--violet); color: var(--white); }

.post-head { padding-block: clamp(40px, 6vw, 80px) 0; }
.post-head h1 { font-size: var(--fs-page); line-height: 1.12; }
.post-lead { margin-top: 18px; font-size: var(--fs-lead); color: var(--muted); }
.post-head .post-meta { display: block; margin-top: 18px; }
.crumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; color: var(--violet); font-weight: var(--fw-medium); font-size: var(--fs-small); }
.post-cover { margin-top: clamp(24px, 4vw, 48px); }
.post-cover img { width: 100%; border-radius: var(--r-md); }
.post > .wrap:last-child { padding-block: clamp(32px, 5vw, 64px) clamp(48px, 6vw, 88px); }
.toc { margin-bottom: 36px; padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.toc b { display: block; margin-bottom: 10px; font: var(--fw-head) 1.15rem/1.2 var(--font-head); }
.toc ol { display: grid; gap: 6px; padding-inline-start: 1.3em; list-style: decimal; }
.toc li::marker { color: var(--violet); }
.toc a:hover { color: var(--violet); }

/* ---------- Help centre ---------- */
.help { display: grid; gap: clamp(32px, 4vw, 56px); }
.help-search { display: flex; align-items: center; gap: 12px; max-width: 560px; padding: 0 18px; border: 1px solid var(--ink-a14); border-radius: var(--r-btn); background: var(--white); }
.help-search:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px var(--focus-ring); }
.help-search i { font-size: 1.3rem; color: var(--violet); }
.help-search input { flex: 1; min-width: 0; padding: 14px 0; border: 0; outline: 0; background: none; font: inherit; color: inherit; }
.help-group h2 { font-size: var(--fs-h3); margin-bottom: 16px; }
.help-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.help-list a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: var(--fw-medium); line-height: 1.35; transition: border-color .3s var(--ease); }
.help-list a:hover { border-color: var(--violet); }
.help-list a span { flex: 1; }
.help-list a i:first-child { font-size: 1.3rem; color: var(--violet); }
.help-list a i:last-child { color: var(--ink-a40); transition: transform .3s var(--ease), color .3s var(--ease); }
.help-list a:hover i:last-child { transform: translateX(-5px); color: var(--violet); }
.support-box { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.support-box > i { font-size: 2rem; color: var(--violet); }
.support-box div { flex: 1; min-width: 180px; display: grid; }
.support-box b { font: var(--fw-head) 1.15rem/1.3 var(--font-head); }
.support-box span { color: var(--muted); font-size: var(--fs-small); }
.guide { display: grid; grid-template-columns: minmax(0, var(--read)) minmax(0, 320px); justify-content: space-between; gap: clamp(32px, 5vw, 80px); align-items: start; }
.guide-side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 24px; }
.guide-side nav b { display: block; margin-bottom: 10px; font: var(--fw-head) 1.15rem/1.2 var(--font-head); }
.guide-side nav ul { display: grid; gap: 2px; }
.guide-side nav a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--muted); font-size: var(--fs-small); line-height: 1.4; }
.guide-side nav a[aria-current] { background: var(--grey); color: var(--violet); font-weight: var(--fw-semibold); }

/* ---------- Roadmap ---------- */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); align-items: start; }
.board-col { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-md); background: var(--grey); }
.board-col h2 { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; font-size: 1.3rem; }
.board-col h2 span { min-width: 30px; padding: 4px 8px; border-radius: var(--r-pill); background: var(--white); color: var(--violet); font: var(--fw-semibold) var(--fs-small)/1 var(--font-body); text-align: center; }
.board-card { display: grid; gap: 8px; padding: 18px; border-radius: var(--r-sm); background: var(--white); }
.board-card h3 { font-size: 1.1rem; line-height: 1.3; }
.board-card p, .board-col > p { color: var(--muted); font-size: var(--fs-small); line-height: 1.55; }
.board-col > p { padding-inline: 8px; }
.board-card time { color: var(--ink-a40); font-size: .85rem; }
.board-col--ask { background: var(--white); border: 1px solid var(--line); }
.board-col--ask .btn { width: 100%; }

/* ---------- Modal ---------- */
.modal { width: min(560px, calc(100% - 2 * var(--gutter))); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--r-md); background: var(--white); color: var(--navy); box-shadow: var(--shadow); overflow: auto; }
.modal::backdrop { background: var(--backdrop); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px 0; }
.modal-head h2 { font-size: var(--fs-h3); }
.modal-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--grey); color: var(--navy); font-size: 1.2rem; cursor: pointer; }
.modal-close:hover { background: var(--lilac); }
.modal-body { display: grid; gap: 16px; padding: 20px 28px 28px; }
.pshhp .pshh-roadmap-form-container { max-width: none; margin: 0; }
.pshhp .pshh-roadmap-form { padding: 0; border-radius: 0; background: none; }
.pshhp .pshh-form-field { margin-bottom: 18px; }
.pshhp .pshh-form-field label { margin-bottom: 6px; color: var(--navy); font-weight: var(--fw-medium); font-size: var(--fs-small); }
.pshhp .pshh-form-field .required { color: var(--danger); }
.pshhp .pshh-form-field input[type="text"], .pshhp .pshh-form-field textarea, .pshhp .pshh-form-field select { padding: 13px 16px; border: 1px solid var(--ink-a14); border-radius: var(--r-btn); background: var(--white); color: var(--navy); font: inherit; }
.pshhp .pshh-form-field input:focus, .pshhp .pshh-form-field textarea:focus, .pshhp .pshh-form-field select:focus { border-color: var(--violet); box-shadow: 0 0 0 4px var(--focus-ring); }
.pshhp .pshh-submit-btn { padding: 14px 22px; border: 2px solid var(--violet); border-radius: var(--r-btn); background: var(--violet); color: var(--white); font: var(--fw-semibold) 1.05rem/1.2 var(--font-body); transition: background .3s var(--ease), border-color .3s var(--ease); }
.pshhp .pshh-submit-btn:hover { background: var(--violet-dark); border-color: var(--violet-dark); }
.pshhp .pshh-submit-btn:disabled { background: var(--grey-badge); border-color: var(--grey-badge); }
.pshhp .pshh-roadmap-notice { margin: 0; padding: 14px 18px; border: 0; border-radius: var(--r-sm); font-size: var(--fs-small); }
.pshhp .pshh-roadmap-notice.success { background: var(--success-soft); color: var(--success); }
.pshhp .pshh-roadmap-notice.error { background: var(--danger-bg); color: var(--navy); }

/* ---------- Forms ---------- */
.form-card { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-md); background: var(--white); }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { font-weight: var(--fw-medium); font-size: var(--fs-small); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 16px; border: 1px solid var(--ink-a14); border-radius: var(--r-btn); background: var(--white); color: var(--navy); font: inherit; text-align: start; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--violet); box-shadow: 0 0 0 4px var(--focus-ring); }
.field input[type="tel"], .field input[type="email"] { direction: ltr; text-align: right; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: var(--danger); background: var(--danger-bg); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); color: var(--muted); }
.check input { width: 18px; height: 18px; margin-top: .25em; accent-color: var(--violet); flex: none; }
.check.is-bad { color: var(--danger); }
.form-trap { position: absolute; inset-inline-start: -9999px; }
.form-note { min-height: 1.6em; font-weight: var(--fw-medium); color: var(--success); }
.form-note.is-bad { color: var(--danger); }
.form .btn:disabled { opacity: .6; cursor: default; }

/* ---------- WooCommerce pages (cart, checkout, account) ---------- */
/* WooCommerce and the licence manager print their own markup and inline styles. Nothing is changed in them:
   the rules below sit under body.pshhp so they win over both, and they only restyle. */
.woo-wrap { max-width: calc(1120px + 2 * var(--gutter)); }
.page-head--slim { padding-block: clamp(32px, 4vw, 56px); }

.pshhp .woocommerce a { color: var(--violet); }
.pshhp .woocommerce h2, .pshhp .woocommerce h3 { font-size: var(--fs-h3); margin: 0 0 18px; }
/* a.pshh-btn: ".pshhp .woocommerce a" (violet links) outranked ".pshhp .pshh-btn", so the thank-you button text was violet on violet until hover (14-10). */
.pshhp .woocommerce .button, .pshhp .woocommerce button[type="submit"], .pshhp .pshh-btn, .pshhp a.pshh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 13px 22px; border: 2px solid var(--violet); border-radius: var(--r-btn);
  background: var(--violet); color: var(--white); font: var(--fw-semibold) 1rem/1.2 var(--font-body);
  cursor: pointer; text-decoration: none; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.pshhp .woocommerce .button:hover, .pshhp .woocommerce button[type="submit"]:hover, .pshhp .pshh-btn:hover, .pshhp .pshh-btn:focus { background: var(--violet-dark); border-color: var(--violet-dark); color: var(--white); }
.pshhp .pshh-btn-outline, .pshhp .pshh-copy, .pshhp a.pshh-btn-outline { background: var(--white); color: var(--navy); border-color: var(--ink-a14); padding: 9px 16px; font-size: var(--fs-small); }
.pshhp .pshh-btn-outline:hover, .pshhp .pshh-copy:hover, .pshhp .pshh-btn-outline:focus, .pshhp .pshh-copy:focus { background: var(--lilac-2); border-color: var(--violet); color: var(--violet); }

.pshhp .woocommerce form .form-row { margin: 0 0 16px; padding: 0; }
.pshhp .woocommerce form .form-row label { display: block; margin-bottom: 6px; font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.4; }
.pshhp .woocommerce form .form-row .required { color: var(--danger); text-decoration: none; }
.pshhp .woocommerce form .form-row input.input-text, .pshhp .woocommerce form .form-row select, .pshhp .woocommerce form .form-row textarea, .pshhp .pshh-domain-input {
  width: 100%; padding: 13px 16px; border: 1px solid var(--ink-a14); border-radius: var(--r-btn); background: var(--white); color: var(--navy); font: inherit; line-height: 1.4;
}
.pshhp .woocommerce form .form-row input.input-text:focus, .pshhp .woocommerce form .form-row select:focus, .pshhp .woocommerce form .form-row textarea:focus, .pshhp .pshh-domain-input:focus { outline: 0; border-color: var(--violet); box-shadow: 0 0 0 4px var(--focus-ring); }
.pshhp .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--danger); }
.pshhp .woocommerce form .form-row input[type="email"], .pshhp .woocommerce form .form-row input[type="tel"], .pshhp .pshh-domain-input { direction: ltr; text-align: right; }
.pshhp .woocommerce form .form-row-first, .pshhp .woocommerce form .form-row-last { width: calc(50% - 9px); }
.pshhp .woocommerce input[type="checkbox"], .pshhp .woocommerce input[type="radio"] { accent-color: var(--violet); }

/* Notices */
.pshhp .woocommerce-info, .pshhp .woocommerce-message, .pshhp .woocommerce-error, .pshhp .woocommerce-notice {
  margin: 0 0 20px; padding: 16px 20px; border: 0; border-radius: var(--r-sm); background: var(--grey); color: var(--navy); font-size: var(--fs-small); line-height: 1.6; list-style: none;
}
.pshhp .woocommerce-info::before, .pshhp .woocommerce-message::before, .pshhp .woocommerce-error::before { content: none; }
.pshhp .woocommerce-message { background: var(--success-soft); }
.pshhp .woocommerce-error { background: var(--danger-bg); }
.pshhp .woocommerce-info code, .pshhp .woocommerce-message code { padding: 2px 8px; border-radius: 6px; background: var(--white); direction: ltr; unicode-bidi: isolate; }

/* Checkout: details beside a sticky order card */
.pshhp form.checkout_coupon { margin: 0 0 20px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.pshhp form.checkout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0 clamp(24px, 4vw, 56px); align-items: start; }
.pshhp form.checkout > * { grid-column: 1 / -1; }
.pshhp form.checkout > #customer_details { grid-column: 1; grid-row: span 2; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-md); }
.pshhp form.checkout > #order_review_heading { grid-column: 2; }
.pshhp form.checkout > #order_review { grid-column: 2; position: sticky; top: calc(var(--header-h) + 20px); padding: clamp(24px, 3vw, 36px); border-radius: var(--r-md); background: var(--grey); }
.pshhp #customer_details .col-1, .pshhp #customer_details .col-2 { float: none; width: 100%; }
.pshhp #customer_details .col-2:empty, .pshhp .woocommerce-additional-fields:not(:has(.form-row)) { display: none; }
.pshhp .woocommerce table.shop_table { width: 100%; margin: 0 0 20px; border: 0; border-radius: 0; border-collapse: collapse; }
.pshhp .woocommerce table.shop_table th, .pshhp .woocommerce table.shop_table td { padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); text-align: start; font-size: var(--fs-small); background: none; }
.pshhp .woocommerce table.shop_table td:last-child, .pshhp .woocommerce table.shop_table th:last-child { text-align: end; }
.pshhp .woocommerce table.shop_table thead th { color: var(--muted); font-weight: var(--fw-medium); }
.pshhp .woocommerce table.shop_table .order-total th, .pshhp .woocommerce table.shop_table .order-total td { border-bottom: 0; font: var(--fw-head) 1.35rem/1.2 var(--font-head); }
.pshhp #payment { background: none; border-radius: 0; }
.pshhp #payment ul.payment_methods { margin: 0 0 16px; padding: 16px 18px; border: 0; border-radius: var(--r-sm); background: var(--white); list-style: none; }
.pshhp #payment ul.payment_methods li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pshhp #payment ul.payment_methods li img { max-height: 24px; width: auto; margin: 0; }
.pshhp #payment div.payment_box { width: 100%; margin: 10px 0 0; padding: 0; background: none; color: var(--muted); font-size: var(--fs-small); }
.pshhp #payment div.payment_box::before { content: none; }
.pshhp #payment div.payment_box:empty { display: none; }
.pshhp #payment div.form-row { padding: 0; margin: 0; }
.pshhp .woocommerce-privacy-policy-text, .pshhp .woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.pshhp .woocommerce-terms-and-conditions-wrapper label { display: flex; gap: 8px; align-items: flex-start; }
.pshhp #place_order { float: none; width: 100%; padding-block: 16px; font-size: 1.1rem; }
.pshhp #payment .place-order { display: block; }
.secure-note { width: 100%; clear: both; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; color: var(--muted); font-size: var(--fs-small); }
.secure-note i { color: var(--violet); font-size: 1.2rem; }

/* Thank you + order details */
.pshhp .pshh-thankyou { margin: 0 0 28px; padding: clamp(24px, 4vw, 44px); border: 0; border-radius: var(--r-md); background: var(--navy); color: var(--white); text-align: center; }
.pshhp .pshh-thankyou-title { margin: 0 0 12px; color: var(--white); font-size: var(--fs-h2); }
.pshhp .pshh-thankyou-text { margin: 0 auto 22px; max-width: 52ch; color: var(--muted-inv); font-size: var(--fs-lead); line-height: 1.6; }
.pshhp ul.woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.pshhp ul.woocommerce-order-overview li { float: none; margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--muted); font-size: .85rem; text-transform: none; }
.pshhp ul.woocommerce-order-overview li strong { display: block; margin-top: 4px; color: var(--navy); font-size: 1rem; }
.pshhp .woocommerce-customer-details address { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-sm); font-style: normal; }

/* Licence card (licence manager plugin) */
.pshhp .pshh-license-details { margin-top: 32px; }
.pshhp .pshh-license-title { margin-bottom: 14px; color: var(--navy); font-size: var(--fs-h3); }
.pshhp .pshh-license-card { margin-bottom: 16px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); line-height: 1.6; }
.pshhp .pshh-license-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; padding-block: 12px; border-bottom: 1px solid var(--line); }
.pshhp .pshh-license-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pshhp .pshh-license-row:first-child { padding-top: 0; }
.pshhp .pshh-license-label { min-width: 150px; margin: 0; color: var(--muted); font-weight: var(--fw-medium); font-size: var(--fs-small); }
.pshhp .pshh-serial-wrap { margin: 0; }
.pshhp .pshh-serial { padding: 9px 14px; border: 0; border-radius: var(--r-btn); background: var(--grey); color: var(--navy); font-size: .95rem; direction: ltr; }
.pshhp .pshh-badge { padding: 4px 12px; border-radius: var(--r-pill); font-size: .8rem; font-weight: var(--fw-semibold); color: var(--white); }
.pshhp .pshh-badge-active { background: var(--success); }
.pshhp .pshh-badge-inactive, .pshhp .pshh-badge-expired, .pshhp .pshh-badge-invalid { background: var(--grey-badge); }
.pshhp .pshh-domain-form { margin: 0; }
.pshhp .pshh-domain-input { width: auto; min-width: 220px; padding-block: 9px; }
.pshhp .pshh-tip, .pshhp .pshh-muted { color: var(--muted); font-size: var(--fs-small); }
.pshhp .pshh-activation-guide { margin-top: 20px; padding: 20px 24px; border-radius: var(--r-sm); background: var(--grey); }
.pshhp .pshh-activation-guide ol { margin: 10px 0; padding-inline-start: 1.3em; padding-right: 0; list-style: decimal; }

/* My account */
.pshhp .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pshhp .woocommerce:has(> .woocommerce-MyAccount-navigation) > * { grid-column: 1 / -1; }
.pshhp .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
.pshhp .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; }
.pshhp .woocommerce-MyAccount-navigation, .pshhp .woocommerce-MyAccount-content { float: none; width: auto; }
.pshhp .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--header-h) + 20px); padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); }
.pshhp .woocommerce-MyAccount-navigation ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pshhp .woocommerce-MyAccount-navigation a { display: block; padding: 12px 16px; border-radius: var(--r-btn); color: var(--navy); font-weight: var(--fw-medium); transition: background .2s; }
.pshhp .woocommerce-MyAccount-navigation a:hover { background: var(--grey); }
.pshhp .woocommerce-MyAccount-navigation .is-active a { background: var(--violet); color: var(--white); }
.pshhp .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); }
.pshhp .woocommerce-MyAccount-content > p:first-child { font-size: var(--fs-lead); }
.pshhp .woocommerce-MyAccount-content fieldset { margin: 24px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.pshhp .woocommerce-MyAccount-content legend { padding-inline: 8px; font: var(--fw-head) 1.1rem/1.2 var(--font-head); }
.pshhp .woocommerce-MyAccount-content table.shop_table td .button { padding: 8px 14px; font-size: var(--fs-small); }
.pshhp .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.pshhp .woocommerce-Addresses::before, .pshhp .woocommerce-Addresses::after { content: none; }
.pshhp .woocommerce-Address { float: none; width: auto; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-sm); }

/* Login, register, lost password: one centred card */
.pshhp .woocommerce > h2:first-child, .pshhp .woocommerce > .u-columns h2 { font-size: var(--fs-h3); }
.pshhp .woocommerce form.login, .pshhp .woocommerce form.register, .pshhp .woocommerce form.lost_reset_password { max-width: 480px; margin: 0; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-md); }
.pshhp .woocommerce:has(> form.login), .pshhp .woocommerce:has(> form.lost_reset_password) { max-width: 480px; margin-inline: auto; }
.pshhp .woocommerce form.login .form-row:has(.button) { display: flex; flex-direction: column-reverse; gap: 14px; }
.pshhp .woocommerce form.login .button, .pshhp .woocommerce form.lost_reset_password .button { width: 100%; }
.pshhp .woocommerce form .show-password-input { top: 50%; translate: 0 -50%; }
.pshhp .woocommerce form .password-input { display: block; position: relative; }
.pshhp .woocommerce-LostPassword { margin: 14px 0 0; font-size: var(--fs-small); }
.pshhp .woocommerce .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.pshhp .woocommerce .u-columns::before, .pshhp .woocommerce .u-columns::after { content: none; }
.pshhp .woocommerce .u-column1, .pshhp .woocommerce .u-column2 { float: none; width: auto; }

.preview-flag { position: fixed; bottom: 12px; inset-inline-start: 12px; z-index: 90; padding: 8px 14px; border-radius: var(--r-pill); background: var(--preview); color: var(--navy); font-size: .85rem; box-shadow: var(--shadow-chip); }

/* ---------- Closing CTA + footer ---------- */
.site-footer { background: var(--white); padding: var(--frame); margin-top: var(--section); }
.foot-shape { border-radius: var(--r-md); background: var(--navy); color: var(--white); padding-block: clamp(56px, 8vw, 120px) 28px; }
.foot-cta { font: var(--fw-head) clamp(2.2rem, 5vw, 4.5rem)/1.08 var(--font-head); letter-spacing: -.02em; max-width: 22ch; margin-bottom: clamp(56px, 8vw, 112px); }
.foot-cta a { white-space: nowrap; color: var(--violet-soft); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .14em; transition: color .3s; }
.foot-cta a:hover { color: var(--white); }
.foot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 64px); }
/* Newsletter strip: our form (inc/forms.php) on the navy footer. */
.foot-news { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-bottom: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--line-inv); }
.foot-news h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 12px; }
.foot-news__copy p { color: var(--muted-inv); }
.news-form { gap: 14px; max-width: 560px; min-width: 0; justify-self: end; width: 100%; }
.news-form__row { display: flex; gap: 6px; padding: 6px; border-radius: calc(var(--r-btn) + 6px); background: var(--white); transition: box-shadow .25s; }
.news-form__row:focus-within { box-shadow: 0 0 0 4px var(--focus-ring-inv); }
.news-form__row:has(.is-bad) { box-shadow: 0 0 0 2px var(--danger-inv); }
.news-form__row input { flex: 1; width: 100%; min-width: 0; padding: 12px 14px; border: 0; background: transparent; color: var(--navy); font: inherit; direction: ltr; text-align: right; }
.news-form__row input::placeholder { color: var(--muted); direction: rtl; }
.news-form__row input:focus { outline: 0; }
.news-form__row .btn { flex: none; }
.news-form .btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.news-form .check { color: var(--muted-inv); }
.news-form .check input { accent-color: var(--violet-soft); }
.news-form .check.is-bad { color: var(--danger-inv); }
.news-form .form-note { margin: 0; color: var(--white); }
.news-form .form-note:empty { display: none; }
.news-form .form-note.is-bad { color: var(--danger-inv); }
.foot-col h2 { font-size: 1.35rem; margin-bottom: 18px; }
.foot-col li { padding-block: 5px; }
.foot-col a { color: var(--muted-inv); font-size: var(--fs-small); transition: color .25s; }
.foot-col a:hover { color: var(--white); }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: clamp(48px, 6vw, 88px); padding-top: 28px; border-top: 1px solid var(--line-inv); color: var(--muted-inv); font-size: var(--fs-small); }
.foot-bottom img { height: 24px; width: auto; filter: brightness(0) invert(1); }
.foot-social { display: flex; gap: 18px; margin-inline-start: auto; font-size: 1.25rem; color: var(--white); }
.foot-social a:hover { color: var(--violet-soft); }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
/* First screen (home and product hero): the same entrance, played by CSS at load. With the scroll reveal the headline,
   which is the page's LCP, stayed hidden until main.js ran after every footer script (mobile LCP 10-13s, 14-10). */
.hero [data-reveal] { opacity: 1; transform: none; transition: none; animation: rise .8s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .hero [data-reveal] { opacity: 1; transform: none; transition: none; animation: none; }
  .mcard, .coin, .hub-node, .hub path, .scene-glow::before, .scene-glow::after { animation: none; }
  .chip, .card--link, .card .card-more i { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .nav { display: none; }
  .burger { display: grid; place-items: center; }
  .drawer { display: grid; gap: 4px; padding: 0 var(--gutter); max-height: 0; overflow: hidden; background: var(--white); transition: max-height .5s var(--ease), padding .5s var(--ease); }
  .drawer.is-open { max-height: 80vh; padding-block: 12px 24px; border-bottom: 1px solid var(--line); }
  .drawer > a, .drawer summary { padding: 14px 4px; font: var(--fw-semibold) 1.15rem/1.3 var(--font-head); border-bottom: 1px solid var(--line); cursor: pointer; }
  .drawer summary { list-style: none; display: flex; justify-content: space-between; align-items: center; }
  .drawer summary::-webkit-details-marker { display: none; }
  .drawer summary::after { content: "+"; color: var(--violet); font-weight: var(--fw-regular); }
  .drawer details[open] summary::after { content: "\2212"; }
  .drawer details a { display: block; padding: 10px 16px; color: var(--muted); font: var(--fw-medium) 1rem/1.3 var(--font-body); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .foot-news { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr minmax(0, 420px); }
  .phero { grid-template-columns: 1fr minmax(0, 360px); }
  .faq-wrap { grid-template-columns: 1fr; }
  .posts, .help-list, .board { grid-template-columns: repeat(2, 1fr); }
  .guide { grid-template-columns: 1fr; }
  .guide-side { position: static; }
  .mega { display: none; }
  .pshhp form.checkout, .pshhp .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; }
  .pshhp form.checkout > #customer_details, .pshhp form.checkout > #order_review_heading, .pshhp form.checkout > #order_review { grid-column: 1; }
  .pshhp form.checkout > #order_review, .pshhp .woocommerce-MyAccount-navigation { position: static; }
  .pshhp .woocommerce > .woocommerce-MyAccount-navigation, .pshhp .woocommerce > .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
  .pshhp form.checkout > #order_review_heading { margin-top: 28px; }
  .pricing { grid-template-columns: 1fr; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .hero-grid, .split, .phero { grid-template-columns: 1fr; }
  .tour-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: 100%; padding-bottom: 6px; }
  .tour-tabs button { flex: none; }
  .scene { max-width: 420px; margin-inline: auto; width: 92%; }
  .split--flip .split-media, .split-media { order: -1; }
  .cards, .nums, .posts, .help-list, .board, .field-row, .pshhp .woocommerce-Addresses, .pshhp .woocommerce .u-columns { grid-template-columns: 1fr; }
  .pshhp .woocommerce form .form-row-first, .pshhp .woocommerce form .form-row-last { width: 100%; float: none; }
  .pshhp .pshh-license-label { min-width: 100%; }
  .includes ul { columns: 1; }
  .actions .btn { flex: 1 1 100%; }
  .trust li { justify-content: flex-start; }
  .foot-social { margin-inline-start: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav-icon { display: none; }
}