/* =====================================================================================
   Phyllis — "Ledger" theme.
   Editorial black / white / greys. Influences: keygraph (hairline lattice with registration
   crosses, two-tone statements, bracketed callouts, dot-plate isometrics, mono links) and
   xbow (floating nav, split hero with product art, proof bento, animated product
   illustrations, glow dividers between dark and light, giant footer wordmark).
   One accent: xbow green, used only for proven / approved.
   ===================================================================================== */
:root {
  --ground: #060606;
  --raised: #0c0c0d;
  --lift: #121213;
  --hair: #232325;
  --hair-2: #2f2f32;
  --mark: #55555a;
  --ink: #f4f4f5;
  --ink-2: #a1a1a7;
  --ink-3: #6f6f75;
  --accent: #2bb5cb;
  --accent-ink: #2bb5cb;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --display: "avenueMono", ui-monospace, monospace; /* xbow display face (DM Mono standing in for Avenue Mono) */
  --wrap: 1200px;
  --pad: 24px;
  --r: 0px;
  /* map onto xbow's tokens so its components follow the theme */
  --color-background: var(--ground);
  --color-foreground: var(--ink);
  --color-muted: var(--ink-2);
  --font-geist-sans: var(--sans);
  --font-geist-mono: var(--mono);
}
.ph-light {
  --ground: #f6f6f6; --raised: #ffffff; --lift: #fafafa;
  --hair: #e4e4e7; --hair-2: #d4d4d8; --mark: #a1a1aa;
  --ink: #0b0b0c; --ink-2: #52525b; --ink-3: #8a8a93;
  --accent-ink: #027586;
  --color-background: var(--ground); --color-foreground: var(--ink); --color-muted: var(--ink-2);
}

html, body { background: var(--ground); color: var(--ink); overflow-x: clip; }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: #000; }

/* ---------- frame: every section sits in the same lattice ---------- */
.ph-sec { position: relative; background: var(--ground); color: var(--ink); padding: 112px 0; }
.ph-sec + .ph-sec { border-top: 1px solid var(--hair); }
.ph-wrap { position: relative; width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; }
.ph-sec > .ph-rails { position: absolute; inset: 0; pointer-events: none; }
.ph-sec > .ph-rails::before, .ph-sec > .ph-rails::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hair);
  left: max(8px, calc(50% - var(--wrap) / 2 - 40px)); }
.ph-sec > .ph-rails::after { left: auto; right: max(8px, calc(50% - var(--wrap) / 2 - 40px)); }
/* registration crosses where a section's top edge meets the rails */
.ph-sec + .ph-sec > .ph-rails > i { position: absolute; top: -6px; width: 11px; height: 11px; z-index: 2;
  background: linear-gradient(var(--mark), var(--mark)) 0 5px / 11px 1px no-repeat, linear-gradient(var(--mark), var(--mark)) 5px 0 / 1px 11px no-repeat; }
.ph-sec + .ph-sec > .ph-rails > i:first-child { left: calc(max(8px, calc(50% - var(--wrap) / 2 - 40px)) - 5px); }
.ph-sec + .ph-sec > .ph-rails > i:last-child { right: calc(max(8px, calc(50% - var(--wrap) / 2 - 40px)) - 5px); }

/* ---------- type ---------- */
.ph-eyebrow { display: flex; gap: 14px; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ph-eyebrow b { font-weight: 500; color: var(--ink); }
.ph-eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--ink); }
.ph-h1, .ph-h2, .ph-h3, .ph-two { font-family: var(--display); font-weight: 400; letter-spacing: -.05em; margin: 0; text-wrap: balance; color: var(--ink); }
.ph-h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; }
.ph-h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; }
.ph-h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.2; }
.ph-h1 em, .ph-h2 em, .ph-h3 em, .ph-two em { font-style: normal; color: var(--ink-3); }
.ph-lede { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 620px; }
.ph-two { font-size: clamp(26px, 3vw, 40px); line-height: 1.2; }
.ph-head { display: grid; gap: 20px; margin-bottom: 56px; }
.ph-head.c { justify-items: center; text-align: center; }
.ph-head.c .ph-lede { margin-inline: auto; }
.ph-head.split { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; }
.ph-mono { font: 400 13px var(--mono); color: var(--ink-3); }

/* ---------- actions ---------- */
.ph-btn { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; border-radius: 0; font: 500 13px var(--mono);
  background: var(--ink); color: var(--ground); border: 1px solid var(--ink); transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.ph-btn:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.ph-btn.ghost { background: transparent; color: var(--ink); border-color: var(--hair-2); }
.ph-btn.ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.ph-btn svg { width: 10px; height: 10px; }
.ph-link { display: inline-flex; gap: 8px; align-items: center; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.ph-link::after { content: "→"; transition: transform .2s; }
.ph-link:hover { color: var(--accent-ink); } .ph-link:hover::after { transform: translateX(3px); }
.ph-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-capture { display: flex; gap: 6px; padding: 5px 5px 5px 16px; border: 1px solid var(--hair-2); border-radius: 0; max-width: 440px; background: var(--raised); }
.ph-capture input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: 400 15px var(--sans); }
.ph-capture input::placeholder { color: var(--ink-3); }

/* ---------- lattice: hairline cells with registration crosses (keygraph p2-cells) ---------- */
.ph-cells { display: grid; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); position: relative; }
.ph-cells.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph-cells.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ph-cells.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ph-cells.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ph-cell { position: relative; padding: 28px 24px 32px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--ground); transition: background .25s; }
.ph-cell:hover { background: var(--lift); }
.ph-cell > .ic, .ph-trust .ic { display: block; flex: none; width: 20px; height: 20px; color: var(--ink); }
.ph-cell > .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ph-cell > h3 { margin: 18px 0 0; font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.ph-cell > p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.ph-cell > .ph-link { margin-top: 22px; }
.ph-cell > .n { font: 400 13px var(--mono); color: var(--ink-3); }
.ph-cell > .sub { display: block; margin-top: 6px; font: 400 13px var(--mono); color: var(--ink-3); }
.ph-cell.lit > .n, .ph-cell.lit > .ph-link { color: var(--accent-ink); }
.ph-cells .ph-x { position: absolute; width: 11px; height: 11px; pointer-events: none; z-index: 2;
  background: linear-gradient(var(--mark), var(--mark)) 0 5px / 11px 1px no-repeat, linear-gradient(var(--mark), var(--mark)) 5px 0 / 1px 11px no-repeat; }
.ph-bar { position: relative; border: 1px solid var(--hair); padding: 20px; text-align: center; }
.ph-bar h2 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.ph-bar + .ph-cells { border-top: 0; }

/* stat cell (xbow proof bento, in the lattice) */
.ph-stat > b { display: block; font: 400 clamp(44px, 5vw, 76px)/1 var(--mono); letter-spacing: -.06em; color: var(--ink); }
.ph-stat.lit > b { color: var(--accent); }
.ph-stat > h3 { margin-top: 26px; }

/* ---------- callout with corner brackets (keygraph) ---------- */
.ph-callout { position: absolute; width: 250px; padding: 16px 18px; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(6px); }
.ph-callout::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) top left / 12px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) top left / 1px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) top right / 12px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) top right / 1px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom left / 12px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) bottom left / 1px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom right / 12px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) bottom right / 1px 12px no-repeat; }
.ph-callout b { display: block; font-weight: 500; font-size: 16px; }
.ph-callout span { display: block; margin-top: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }

/* ---------- split row: copy + art (xbow feature rows) ---------- */
.ph-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 56px 0; }
.ph-row.flip > :first-child { order: 2; }
.ph-row .ph-h3 { margin-top: 20px; }
.ph-icbox { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--hair-2); background: var(--raised); }
.ph-icbox .ic { display: block; width: 18px; height: 18px; color: var(--ink); }
.ph-icbox .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ph-row .ph-lede { margin-top: 16px; font-size: 16px; }
.ph-row .ph-link { margin-top: 24px; }
.ph-art { position: relative; min-height: 320px; display: grid; place-items: center; }
.ph-art > * { width: 100%; }

/* ---------- product cards (the bento anatomy) ---------- */
.ph-card { background: var(--raised); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
a.ph-card { display: flex; flex-direction: column; transition: border-color .25s, transform .25s; }
a.ph-card:hover { border-color: var(--hair-2); transform: translateY(-2px); }

/* ---------- dividers between dark and light (xbow glow) ---------- */
.ph-div { position: relative; height: calc(300 * 130vw / 1440); max-height: 420px; background: #f6f6f6; overflow: visible; z-index: 3; pointer-events: none; } /* sits on the light side, like xbow's */
.ph-div > div { position: absolute; left: 50%; translate: -50% 0; width: 130vw; height: calc(430 * 130vw / 1440); top: -1px; overflow: hidden; }
.ph-div.up > div { top: auto; bottom: -1px; transform: scaleY(-1); }
.ph-div canvas { display: block; width: 100%; height: 100%; }

/* ---------- reveal ---------- */
.ph-rv { opacity: 0; transform: translateY(16px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.ph-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ph-rv { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
  .ph-cells.c3, .ph-cells.c4, .ph-cells.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-row, .ph-head.split { grid-template-columns: 1fr; gap: 32px; }
  .ph-row.flip > :first-child { order: 0; }
  .ph-callout { position: relative; inset: auto !important; width: auto; margin-top: 12px; }
}
@media (max-width: 640px) {
  .ph-sec { padding: 80px 0; }
  .ph-cells.c2, .ph-cells.c3, .ph-cells.c4, .ph-cells.c5 { grid-template-columns: 1fr; }
}

/* ---------- square corners, everywhere (cards, xbow components, panels) ---------- */
.ph-card, .ph-card img, .pb, .pb *, .ph-post img,
[class*="proof-chain-module"], [class*="proof-chain-module"]::before, [class*="proof-chain-module"]::after,
[class*="media-tabs-module"], [class*="media-tabs-module"]::before, [class*="media-tabs-module"]::after,
[class*="loop-steps-module"], [class*="loop-panels-module"], [class*="loop-panels-module"] *,
.estate-coverage__tile, .estate-coverage__mark, .release-cadence__root *, .finding-evidence__root *,
main .rounded-xl, main .rounded-lg, main .rounded-md { border-radius: 0 !important; }
/* clipped illustrations fade out instead of cutting */
.ph-art > div:not(.ph-cardart):not(.pa) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
header [data-state] svg[viewBox="0 0 24 24"] path { fill: none !important; stroke: currentColor; }

footer { --footer-outline: #f4f4f5; }
footer [data-ph-glow] { opacity: .9; }
/* menu promo card — the one splash of green, as on xbow */
header .ph-promo { background: #2bb5cb !important; color: #0b0b0c; --color-foreground: #0b0b0c; }
header .ph-promo p, header .ph-promo .text-foreground { color: #0b0b0c !important; }
header .ph-promo a { background: #0b0b0c !important; color: #fff !important; border-color: #0b0b0c !important; }
/* CTA hub: black core, white Phyllis mark */
.ph-hub .xbow-hub__disc, .ph-hub .xbow-hub__discInner { fill: #060606 !important; }
.ph-hub .xbow-hub__ring { stroke: #2f2f32; }
.ph-hub .xbow-hub__mark, .ph-hub .xbow-hub__mark path { fill: #ffffff !important; opacity: 1 !important; }

/* ISO 27001 badge */
.ph-iso { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.ph-iso-mark { width: 50px; height: 44px; flex: none; }
.ph-iso b { display: block; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ph-iso small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.ph-actions .ph-iso { margin-left: 12px; }
.ph-hero-copy > .ph-iso { margin-top: 28px; }
footer .ph-iso { --iso-knock: var(--ground); --ink: #f4f4f5; --ink-3: rgba(244,244,245,.5); margin-top: 6px; gap: 8px; }
footer .ph-iso-mark { width: 34px; height: 30px; }
footer .ph-iso b { font-size: 10px; } footer .ph-iso small { font-size: 0; margin-top: 1px; } footer .ph-iso small::before { content: "Certified"; font-size: 10px; }

.ph-iso span { line-height: 1.3; white-space: nowrap; }

/* black footer, xbow-style: the one green splash glows up behind the wordmark; the hover outline is green */
footer[data-theme=dark] { --footer-glow: #2bb5cb; --footer-outline: #2bb5cb; --footer-deep: #0b0d08; --footer-rim: #1c1c1e; border-top: 0; }
.ph-cta-sec + footer, .ph-sec + footer { border-top: 0; }

/* menus, as on xbow: the open/hovered trigger gets a soft pill; a hovered item turns green (icon + title) */
header[data-theme=dark] button.group:hover, header[data-theme=dark] button.group[data-state=open] { background: #141416 !important; }
header[data-theme=light] button.group:hover, header[data-theme=light] button.group[data-state=open] { background: #ebebec !important; }
header[data-theme=dark] a[data-radix-collection-item]:not(.ph-promo *):hover, header[data-theme=dark] a[data-radix-collection-item]:not(.ph-promo *):focus-visible { color: #2bb5cb !important; }
/* light menus: the green is unreadable on white, so the hovered item goes to the deep olive accent */
header[data-theme=light] a[data-radix-collection-item]:not(.ph-promo *):hover, header[data-theme=light] a[data-radix-collection-item]:not(.ph-promo *):focus-visible { color: #027586 !important; }
header [data-radix-collection-item]:hover .text-s3 ~ * { color: var(--ink-3); }

/* ---- Get started art: inputs into the mark's ribbons, results out of it ---- */
.ph-flowart { max-width: 1040px; margin: 8px auto 0; }
.ph-flowart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ph-flowart .lines path { fill: none; stroke: var(--hair-2); stroke-width: 1.5; }
.ph-flowart .pulse { fill: #2bb5cb; filter: drop-shadow(0 0 6px #2bb5cb); }
.ph-flowart .node { fill: var(--ground); stroke: var(--ink-3); stroke-width: 1.5; } .ph-flowart .node.out { stroke: var(--ink); }
.ph-flowart text { font: 400 15px var(--mono); letter-spacing: .04em; fill: var(--ink-3); text-transform: uppercase; }
.ph-flowart .mark { fill: var(--ink); }
.ph-flowart .halo { transform-origin: 600px 180px; animation: phfl-breathe 4s ease-in-out infinite; }
@keyframes phfl-breathe { 50% { opacity: .45; transform: scale(.85); } }
@media (max-width: 700px) { .ph-flowart text { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .ph-flowart .pulses { display: none; } .ph-flowart .halo { animation: none; } }
.ph-dotmark { position: relative; max-width: 1120px; height: 340px; margin: 32px auto 0; }
.ph-dotmark canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 700px) { .ph-dotmark { height: 260px; } }

/* header glow (xbow hero-top-fade): faded brand blue instead of grey */
[class*="hero-top-fade-module__ZyHZwa__sweep"] .fill-neonGreen-500 { fill: #a9dde6; }
[class*="hero-top-fade-module__ZyHZwa__sweep"] .fill-lightBlue-700 { fill: #24707d; }