/* /pharos-alternative/ (S-PLAY vs Pharos). Everything is scoped under .pha.
   Values follow ENTTEC-WEB-STYLE.md (the 2026-10-14 web spec), which Kim chose over
   docs/DESIGN.md for this page on 2026-10-28: body #222 16px, headings #111 Montserrat,
   link text #0C91C3, 8px controls, 12px cards. The tokens are local on purpose, so the
   page does not move when the site-wide tokens are brought in line with the spec.
   Breakpoints: phone up to 575, tablet 576 to 991, desktop 992 and up (DESIGN.md). */

/* Components from the design system (eds-subnav, eds-accordion) are overridden with a
   leading .pha: the design-system sheet can land after this one in the minified bundle,
   so equal specificity is not enough. */

/* The theme's title band (its own H1 and breadcrumb) would duplicate the hero's. Hide it and
   start the page under the navbar, the way the 404 page does. */
body.pha-page #wrapper>header.header .header-inner .title_breadcrumb{display:none;}
body.pha-page #wrapper>header.header{margin-bottom:0 !important;}
body.pha-page #wrapper>header.header .header-inner{min-height:0;padding:var(--pha-nav-h,70px) 0 0;}
body.pha-page #wrapper>header.header .header-inner-wrapper{min-height:0;}
@media (max-width:767px){body.pha-page{--pha-nav-h:56px;}}

.pha{
	--pha-blue:#0EA5DF;--pha-blue-text:#0C91C3;--pha-tint:#D9F2FB;
	/* Text links: DESIGN.md's link blue (the brand blue is under 4.5:1 as text on white). On the
	   full blue tint it measures 4.3:1, so links there take one step darker (5.0:1). */
	--pha-link:var(--enttec-link,#0A78A3);--pha-link-on-tint:#096D94;
	--pha-success:var(--enttec-success,#15803D);--pha-danger:var(--enttec-danger,#B91C1C);
	--pha-ink:#111111;--pha-body:#222222;--pha-muted:#6B7280;
	/* Muted text on a grey panel or the blue tint: #6B7280 measures 4.4:1 there, under the 4.5:1
	   floor, so those spots take the next step of the same grey scale (7:1 on #F3F4F6). */
	--pha-muted-on-panel:#4B5563;
	--pha-bg:#F9FAFB;--pha-panel:#F3F4F6;--pha-line:#E5E7EB;--pha-line-hover:#D1D5DB;
	--pha-shadow:0 1px 2px rgba(0,0,0,.05);--pha-shadow-hover:0 4px 16px rgba(0,0,0,.12);
	--pha-display:var(--enttec-font-display,"Montserrat",system-ui,sans-serif);
	--pha-text:var(--enttec-font-body,"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
	--pha-gutter:24px;
	/* The sub-nav bar's full height (53px row + two 1px borders). Declared on the page root so the
	   design system's anchor offset and the sticky table header below both read it. */
	--eds-subnav-h:55px;
	color:var(--pha-body);background:#fff;font-family:var(--pha-text);font-size:16px;line-height:1.5;
	-webkit-font-smoothing:antialiased;
}
.pha *{box-sizing:border-box;}
.pha-nb{white-space:nowrap;}  /* product names never split at their hyphen (render.php) */
/* Resets at one-class specificity (:where keeps the element out of the count): enough to beat
   the theme's bare p/ul/li rules, and equal to the component classes below, which come later
   and so win. */
.pha :where(h1,h2,h3,p,ul,ol){margin:0;}
.pha :where(ul,ol){padding:0;list-style:none;}
.pha :where(li){margin:0;}  /* the theme gives every li a 6px margin */
.pha h1,.pha h2{font-family:var(--pha-display);font-weight:700;color:var(--pha-ink);}
.pha h2{text-wrap:balance;}
.pha h2{font-size:24px;line-height:1.2;letter-spacing:-.01em;}
.pha :where(img){max-width:100%;height:auto;}
/* Doubled class: the theme's global a:hover{color:#444} otherwise wins. */
/* ONE look for every text link on the page (Kim, 2026-11-04): link blue, underline on hover and
   keyboard focus, as DESIGN.md sets for the site. The next rule keeps the underline off the
   things that aren't text links (buttons, sub-nav tabs, project cards). */
.pha.pha a{color:var(--pha-link);text-decoration:none;}
.pha.pha a:hover,.pha.pha a:focus-visible{color:var(--pha-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.pha.pha :is(.pha-btn,.pha-subnav a,.pha-project,.pha-project-list a):is(:hover,:focus-visible){text-decoration:none;}
.pha.pha a:focus-visible{outline:2px solid var(--pha-blue);outline-offset:2px;border-radius:2px;}
.pha-wrap{max-width:calc(1280px + 2 * var(--pha-gutter));margin-inline:auto;padding-inline:var(--pha-gutter);}
.pha-sec{padding:60px 0;}
.pha-sec--grey{background:var(--pha-bg);}
.pha-muted{color:var(--pha-muted);}
.pha-head{max-width:820px;margin:0 auto 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;}

/* Buttons: the design-system eds-btn, skinned to the spec (14px, 10x16, 8px corners).
   eds-btn keeps its 44px minimum height, which is the tap-target floor. */
.pha .pha-btn{font-family:var(--pha-text);font-size:14px;font-weight:600;line-height:1.5;padding:10px 16px;border-radius:8px;gap:6px;}
.pha.pha .pha-btn--primary{background:var(--pha-blue);color:#fff;border-color:var(--pha-blue);}
.pha.pha .pha-btn--primary:hover{background:var(--pha-blue-text);border-color:var(--pha-blue-text);color:#fff;}
.pha.pha .pha-btn--secondary{background:#fff;color:var(--pha-ink);border-color:var(--pha-line);}
.pha.pha .pha-btn--secondary:hover{border-color:var(--pha-line-hover);color:var(--pha-ink);}
.pha .pha-btn .pha-icon{width:16px;height:16px;}
/* Optical centring. Each icon is drawn inside blank space in its 16px box, so the right padding
   and the gap to the label looked wider than the left padding. Pull the box out by that blank
   space: the drawn glyph then sits 16px from the edge and 6px from the label, like the text. */
.pha .pha-btn .pha-icon{margin-left:calc(var(--pha-icon-l,0px) * -1);margin-right:calc(var(--pha-icon-r,0px) * -1);}
.pha-icon--arrow,.pha-icon--arrow-white{--pha-icon-l:4px;--pha-icon-r:4px;}
/* The down arrow's stroke is centred in its box, but a label's letters sit above the middle of
   their line box, so beside "See the comparison" the arrow read about 1.5px low (measured at 4x,
   2026-11-03). Lift it with top, not transform: the hover nudge already owns transform. */
.pha .pha-btn .pha-icon--arrow-down-white{position:relative;top:-1.5px;}
.pha-icon--arrow-down-white{--pha-icon-l:2.5px;--pha-icon-r:2.5px;}
.pha-icon--cart{--pha-icon-l:.5px;--pha-icon-r:2px;}

/* ---------- Hero ---------- */
.pha-hero{padding:60px 0;overflow:clip;}  /* clip, not hidden: hidden makes a scroll container */
.pha-hero__grid{display:grid;grid-template-columns:minmax(0,660px) minmax(0,1fr);gap:38px;align-items:center;}
.pha-hero__text{display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.pha-crumbs ol{display:flex;flex-wrap:wrap;font-size:14px;line-height:1.55;color:var(--pha-muted);}
.pha-crumbs li+li::before{content:"/";margin:0 8px;color:var(--pha-muted);}
.pha-eyebrow{font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--pha-ink);}
.pha h1{font-size:36px;line-height:1.12;letter-spacing:-.02em;}
.pha-hero__lede{font-size:20px;line-height:1.5;}
.pha-hero__updated{font-size:13px;line-height:1.3;color:var(--pha-muted);}
.pha-hero__cta{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px;}
/* The photo is wider than its column on purpose and runs off the right edge (Figma A v5). */
.pha-hero__media img{display:block;width:715px;max-width:none;}
/* Hero background (Kim, 2026-10-30, mockup E2 "colour sweep"): a field of LED pixels behind the
   SP1-1, lit blue to violet on a diagonal. A dot-grid mask intersected with a radial fade, so the
   gradient only shows through the "pixels" and fades out at the edges. Static: no motion. */
.pha-hero{position:relative;isolation:isolate;}
.pha-hero__media{position:relative;}
.pha-hero__media img{position:relative;z-index:1;}
.pha-hero__media::before,.pha-hero__media::after{content:"";position:absolute;z-index:0;pointer-events:none;}
.pha-hero__media::before{inset:-120px -260px -120px -60px;
	background:linear-gradient(120deg,rgba(17,17,17,.10) 10%,rgba(14,165,223,.85) 38%,rgba(124,92,255,.75) 58%,rgba(17,17,17,.10) 85%);
	-webkit-mask:radial-gradient(circle,#000 3px,transparent 3.6px) 0 0/24px 24px,radial-gradient(closest-side at 48% 48%,#000 30%,transparent 100%) center/100% 100% no-repeat;
	-webkit-mask-composite:source-in;
	mask:radial-gradient(circle,#000 3px,transparent 3.6px) 0 0/24px 24px,radial-gradient(closest-side at 48% 48%,#000 30%,transparent 100%) center/100% 100% no-repeat;
	mask-composite:intersect;}
.pha-hero__media::after{left:6%;width:80%;bottom:8%;height:36px;background:radial-gradient(closest-side,rgba(0,0,0,.2),transparent);filter:blur(6px);}

/* ---------- Stat cards ---------- */
.pha-stats{padding-bottom:48px;}
.pha-stats__grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px;} /* 3 cards, or 2 where the price card is hidden */
.pha-stat{display:flex;align-items:center;gap:20px;padding:24px;background:#fff;border:1px solid var(--pha-line);border-radius:12px;box-shadow:var(--pha-shadow);}
.pha-stat__icon{flex:none;display:flex;padding:14px;border-radius:12px;background:var(--pha-tint);}
.pha-stat p{color:var(--pha-muted);}
.pha-stat b{display:block;font-family:var(--pha-display);font-weight:700;font-size:28px;line-height:34px;letter-spacing:-.02em;color:var(--pha-ink);margin-bottom:2px;} /* below the H1 (36px): a number reads bigger than words at the same size */

/* ---------- Sub-nav: the eds-subnav component (sticky and active-link tracking come
   from the design system), with a light skin to the spec. */
.pha .pha-subnav{background:#fff;border-top:1px solid #D9D9D9;border-bottom:1px solid #D9D9D9;}
.pha .pha-subnav ul{gap:40px;height:53px;align-items:stretch;padding-inline:var(--pha-gutter);}
.pha.pha .pha-subnav a{display:flex;align-items:center;font-family:var(--pha-text);font-size:14px;font-weight:600;color:var(--pha-muted);padding:0;transition:color .2s ease;}
.pha .pha-subnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--pha-blue);transform:scaleX(0);transition:transform .2s ease;}
.pha.pha .pha-subnav a:hover,.pha.pha .pha-subnav a[aria-current="true"]{color:var(--pha-ink);}
.pha .pha-subnav a[aria-current="true"]::after{transform:scaleX(1);}
.pha.pha .pha-subnav a:focus-visible{outline-offset:-2px;}

/* ---------- Spec table ---------- */
.pha-head > p:not(.pha-chip){max-width:820px;}
.pha-chip{margin-top:4px;padding:6px 14px;border-radius:999px;background:var(--pha-panel);font-size:13px;font-weight:600;line-height:1.3;color:var(--pha-muted-on-panel);}
.pha-table{overflow-x:auto;border:1px solid var(--pha-line);border-radius:12px;background:#fff;}
.pha-table:focus-visible{outline:2px solid var(--pha-blue);outline-offset:2px;}
.pha-table table{width:100%;min-width:1024px;border-collapse:collapse;table-layout:fixed;margin:0;font-size:16px;}
.pha-table th,.pha-table td{padding:14px 18px;text-align:left;vertical-align:top;border:0;border-bottom:1px solid var(--pha-line);line-height:1.5;}
.pha-table tbody tr:last-child > *{border-bottom:0;}
.pha-table thead th{padding:18px 18px 16px;font-size:15px;font-weight:600;line-height:1.2;color:var(--pha-ink);background:var(--pha-bg);}
.pha-table thead th:first-child{width:18%;color:var(--pha-muted);}
.pha-table thead th.is-enttec{background:var(--pha-tint);box-shadow:inset 0 3px 0 var(--pha-blue);}
/* The S-PLAY header cell sits on the full tint: same link, one step darker so it passes 4.5:1. */
.pha.pha .pha-table thead th.is-enttec a{color:var(--pha-link-on-tint);}
/* Visually hidden, still read by screen readers and search engines (table caption). */
.pha-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.pha-table tbody th{font-weight:600;color:var(--pha-ink);background:#fff;}
.pha-table td{color:var(--pha-body);}
.pha-table td.is-enttec{background:rgba(217,242,251,.35);}
.pha-table .is-price td.is-enttec{font-weight:700;}
/* The Feature column stays put while the products scroll under it (below 1100px). */
.pha-table thead th:first-child,.pha-table tbody th{position:sticky;left:0;z-index:1;}
/* From 1100px (seven columns need it) the table fits the width, so the box stops being a sideways scroller (clip, not
   hidden: hidden would still make it a scroll container) and the product row can stick to the
   page, just under the sub-nav. Below 1100px the sideways swipe wins: a header cannot stick to
   the page from inside a scrolling box, which is a CSS limit, not a bug. */
@media (min-width:1100px){
	.pha-table{overflow:clip;}
	.pha-table table{min-width:0;}
	.pha-table thead th{position:sticky;top:calc(var(--eds-chrome-now,0px) + var(--eds-subnav-h));z-index:2;box-shadow:inset 0 -1px 0 var(--pha-line);}
	.pha-table thead th.is-enttec{box-shadow:inset 0 3px 0 var(--pha-blue),inset 0 -1px 0 var(--pha-line);}
	.pha-table thead th:first-child{z-index:3;}
}
/* Under the table: notes and the sources every value comes from (style guide 5.1), as two
   labelled columns under a hairline, so they read as a footnote to the table, not body copy. */
.pha-foot{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px 56px;margin-top:24px;padding-top:20px;border-top:1px solid var(--pha-line);font-size:14px;line-height:1.55;color:var(--pha-muted);}
.pha-foot__label{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pha-ink);}
.pha-foot ul{margin:0;padding:0;list-style:none;}
.pha-foot__notes li + li{margin-top:8px;}
.pha-foot__sources{display:flex;flex-wrap:wrap;gap:6px 18px;}
@media (max-width:767px){.pha-foot{grid-template-columns:minmax(0,1fr);}}
/* Tick and cross: the product pages' series-comparison marks (product-pages.css .epp-compare__icon). */
.pha-table .epp-compare__icon{width:22px;height:22px;vertical-align:middle;}
.pha-table .epp-compare__icon--tick{color:var(--pha-success);}
.pha-table .epp-compare__icon--cross{color:var(--pha-danger);} /* red, not the product pages' grey: Nico wants green tick vs red cross */
.pha-mark-note{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--pha-muted);}

/* ---------- Questions 03 to 05 ---------- */
.pha-qs{padding:24px 0;}
.pha-q{display:grid;grid-template-columns:420px minmax(0,1fr);gap:64px;padding:36px 0;}
.pha-q + .pha-q{border-top:1px solid var(--pha-line);}
.pha-q__head{display:flex;flex-direction:column;gap:10px;}
.pha-q__num{font-size:14px;font-weight:600;line-height:1.2;letter-spacing:.06em;color:var(--pha-muted);}
.pha-q h2{line-height:1.25;letter-spacing:0;}
.pha-q__body{display:flex;flex-direction:column;gap:18px;}
.pha-q__answer{font-family:var(--pha-display);font-weight:600;font-size:20px;line-height:1.5;color:var(--pha-ink);}
.pha-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.pha-tile{display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--pha-bg);border:1px solid var(--pha-line);border-radius:12px;}
.pha .pha-tile h3{font-family:var(--pha-text);font-size:16px;font-weight:600;line-height:1.5;color:var(--pha-ink);}
.pha-tile p{font-size:14px;line-height:20px;color:var(--pha-muted);}
.pha-q__more{color:var(--pha-muted);}
.pha.pha .pha-q__more a{font-weight:600;}

/* ---------- Full system ----------
   Phone: one block per layer (heading, Pharos box, ENTTEC card).
   Tablet: the same blocks, two by two.
   Desktop: the blocks share one grid through subgrid, so the Pharos boxes form a row and
   the ENTTEC cards form a row below it, with the row labels in their own first column. */
.pha-sys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:28px;background:#fff;border:1px solid var(--pha-line);border-radius:12px;box-shadow:var(--pha-shadow);}
.pha-sys__row-label{display:none;}
.pha-sys__layer{display:grid;grid-template-rows:auto auto 1fr;gap:12px;align-content:start;}
.pha .pha-sys__layer-name{font-family:var(--pha-text);font-size:13px;font-weight:600;line-height:1.55;letter-spacing:.06em;text-transform:uppercase;color:var(--pha-muted);}
.pha-sys__who{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pha-muted);margin-bottom:6px;}
.pha-sys__pharos{padding:16px 18px;background:var(--pha-panel);border:1px solid var(--pha-line);border-radius:10px;}
.pha-sys__pharos.is-empty{border-style:dashed;}
.pha .pha-sys__pharos .pha-sys__text,.pha .pha-sys__pharos .pha-sys__who,.pha .is-featured .pha-sys__text,.pha .is-featured .pha-sys__who{color:var(--pha-muted-on-panel);}
.pha-sys__name{font-weight:600;color:var(--pha-ink);}
.pha-sys__text{font-size:14px;line-height:1.4;color:var(--pha-muted);margin-top:4px;}
.pha-sys__enttec{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:330px;padding:19px 19px 156px;background:#fff;border:1px solid var(--pha-line);border-radius:12px;box-shadow:var(--pha-shadow);}
.pha-sys__enttec .pha-sys__who{margin-bottom:-4px;}
.pha-sys__enttec .pha-sys__text{font-size:16px;line-height:1.5;margin-top:0;max-width:222px;}
.pha-sys__brand{font-family:var(--pha-display);font-weight:600;font-size:20px;line-height:1.2;color:var(--pha-ink);}
.pha-sys__enttec.is-featured{background:rgba(14,165,223,.1);border:1.5px solid var(--pha-blue);box-shadow:none;}
/* The product sits whole in the bottom-right corner, never cropped. */
.pha-sys__imgs{position:absolute;right:17px;bottom:17px;width:190px;height:120px;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:6px;}
.pha-sys__img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;object-position:right bottom;}
/* A product shot whose cables are cut off at the frame (SMART PXL): fade both sides so the cut
   edges dissolve into the card instead of ending in a hard line. */
.pha-sys__img.is-fade-x{-webkit-mask-image:linear-gradient(to right,transparent 4%,#000 24%,#000 80%,transparent 100%);mask-image:linear-gradient(to right,transparent 4%,#000 24%,#000 80%,transparent 100%);}
/* Two products in one card (STORM 10 + OCTO): the flat gateway above, the pixel controller below. */
.pha-sys__imgs.is-pair .pha-sys__img:first-child{height:44px;flex:none;}
.pha-sys__imgs.is-pair .pha-sys__img:last-child{height:70px;flex:none;}
.pha-more{margin-top:28px;text-align:center;font-weight:600;}

/* ---------- Which to choose ---------- */
#choose .pha-head{margin-bottom:44px;}
.pha-choose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.pha-choose__card{display:flex;flex-direction:column;gap:16px;padding:32px;background:#fff;border:1px solid var(--pha-line);border-radius:12px;box-shadow:var(--pha-shadow);}
.pha .pha-choose__card h3{font-family:var(--pha-display);font-weight:600;font-size:20px;line-height:1.2;color:var(--pha-ink);}
.pha-choose__card ul{display:flex;flex-direction:column;gap:16px;}
.pha-choose__card li{display:flex;gap:12px;align-items:flex-start;}
.pha-choose__card li .pha-icon{flex:none;margin-top:2px;}
.pha-aside{margin-top:44px;text-align:center;color:var(--pha-muted);}
.pha.pha .pha-aside a{font-weight:600;}

/* ---------- Projects and FAQ ---------- */
.pha-pf{display:grid;grid-template-columns:520px minmax(0,1fr);gap:64px;align-items:start;}
.pha-pf h2{margin-bottom:16px;}
.pha.pha .pha-project{display:block;overflow:hidden;background:#fff;border:1px solid var(--pha-line);border-radius:12px;text-decoration:none;box-shadow:var(--pha-shadow);transition:box-shadow .2s ease,transform .2s ease;}
.pha.pha .pha-project:hover{box-shadow:var(--pha-shadow-hover);transform:translateY(-2px);}
.pha-project img{display:block;width:100%;height:292px;object-fit:cover;}
.pha-project__text{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 16px;padding:18px 20px 20px;} /* name left, link right, one row */
.pha-project .pha-project__name{font-family:var(--pha-display);font-weight:600;font-size:18px;line-height:1.2;color:var(--pha-ink);}
/* The card's "View project" reads as the link: blue, underlined while the card is hovered or focused. */
.pha-project__cta{font-weight:600;color:var(--pha-link);text-underline-offset:3px;}
.pha.pha :is(.pha-project,.pha-project-list a):is(:hover,:focus-visible) .pha-project__cta{text-decoration:underline;text-decoration-thickness:1px;}
.pha-project-list{margin-top:16px;}
.pha.pha .pha-project-list a{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--pha-line);font-weight:600;text-decoration:none;}
.pha-project-list .pha-project__name{color:var(--pha-ink);}

/* FAQ: the design-system accordion (native <details>), with the spec's +/- marker. */
.pha .pha-faq details{border-bottom:0;border-top:1px solid var(--pha-line);}
.pha .pha-faq summary{display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-family:var(--pha-text);font-size:18px;font-weight:600;line-height:1.55;color:var(--pha-ink);}
.pha .pha-faq summary::after{content:"+";position:static;width:auto;height:auto;border:0;transform:none;flex:none;font-family:var(--pha-display);font-size:20px;font-weight:600;line-height:28px;color:var(--pha-muted);}
.pha .pha-faq details[open] summary::after{content:"\2212";transform:none;}
.pha .pha-faq summary:hover{color:var(--pha-blue-text);}
.pha .pha-faq .eds-accordion__body{padding:0 0 20px;margin-top:-10px;color:var(--pha-body);}
.pha.pha .pha-faq a{font-weight:600;}

/* ---------- Interaction feedback ----------
   Motion only answers an action (hover, focus, open). Nothing animates on load or on scroll,
   so every word is visible at first paint with or without JS. Each state also changes colour,
   an underline or a shadow, so no feedback depends on the movement. */

/* Focus mirrors hover. The page-wide a:focus-visible sets a 2px corner for text links; the
   buttons and the project card keep their own corners so the ring follows their shape. */
.pha.pha .pha-btn:focus-visible{border-radius:8px;}
.pha.pha .pha-btn--primary:focus-visible{background:var(--pha-blue-text);border-color:var(--pha-blue-text);color:#fff;}
.pha.pha .pha-btn--secondary:focus-visible{border-color:var(--pha-line-hover);}
.pha.pha .pha-project:focus-visible{border-radius:12px;box-shadow:var(--pha-shadow-hover);}
.pha .pha-faq summary:focus-visible{color:var(--pha-blue-text);}
.pha .pha-faq summary:hover::after,.pha .pha-faq summary:focus-visible::after{color:var(--pha-blue-text);}

/* Spec table: a faint row tint helps the eye follow one spec across four products. An inset
   shadow paints over each cell's own background, so the ENTTEC column keeps its blue tint. */
@media (hover:hover){
	.pha-table tbody tr:hover > *{box-shadow:inset 0 0 0 100vmax rgba(17,17,17,.03);}
}

@media (prefers-reduced-motion:no-preference){
	/* Arrow buttons: the arrow nudges toward where the link goes. */
	.pha .pha-btn .pha-icon{transition:transform .2s ease-out;}
	.pha .pha-btn:hover .pha-icon,.pha .pha-btn:focus-visible .pha-icon{transform:translateX(3px);}
	.pha.pha .pha-project:focus-visible{transform:translateY(-2px);}
	.pha-table tbody tr > *{transition:box-shadow .12s ease-out;}
	/* FAQ marker: the + sits a quarter turn back (it looks the same), so on open the swapped-in
	   minus turns flat like the + folding down, and on close the + turns back. */
	.pha .pha-faq summary::after{transform:rotate(-90deg);transition:transform .2s ease-out,color .2s ease-out;}
	.pha .pha-faq details[open] summary::after{transform:rotate(0deg);}
	/* The answer fades in on open. Opacity only, so nothing below moves beyond the open itself.
	   The transition sits on [open] alone, so closing stays instant. Browsers without
	   ::details-content just open without the fade. */
	.pha .pha-faq details::details-content{opacity:0;}
	.pha .pha-faq details[open]::details-content{opacity:1;transition:opacity .2s ease-out;}
}

@media (prefers-reduced-motion:reduce){
	.pha-subnav a,.pha-subnav a::after,.pha.pha .pha-project,.pha.pha .pha-btn{transition:none;}
	/* eds-btn lifts on hover and only guards that inside .eds, which this page is not. */
	.pha.pha .pha-project:hover,.pha.pha .pha-btn:hover{transform:none;}
}

/* ---------- Desktop (992 and up) ---------- */
@media (min-width:992px){
	.pha-sys{grid-template-columns:70px repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:20px;row-gap:14px;}
	.pha-sys__row-label{display:block;grid-column:1;padding-top:24px;font-size:15px;font-weight:600;line-height:1.2;color:var(--pha-ink);}
	.pha-sys__row-label--pharos{grid-row:2;}
	.pha-sys__row-label--enttec{grid-row:3;}
	.pha-sys__layer{grid-row:1 / span 3;grid-template-rows:subgrid;row-gap:14px;}
	.pha-sys__pharos{min-height:96px;}
	/* The row labels say who makes what here, so the per-box labels go to screen readers only. */
	.pha-sys__who{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}

/* ---------- Tablet and phone (up to 991) ---------- */
@media (max-width:991px){
	.pha-hero__grid{grid-template-columns:minmax(0,1fr);gap:32px;}
	.pha-hero__media img{width:100%;max-width:480px;margin-inline:auto;}
	.pha-hero__media::before{inset:-40px -16px;}
	.pha-stat{flex-direction:column;align-items:flex-start;gap:14px;padding:20px;}
	.pha-stat b{font-size:24px;line-height:30px;}
	.pha .pha-subnav ul{gap:28px;justify-content:flex-start;}
	.pha-q{grid-template-columns:minmax(0,1fr);gap:20px;}
	.pha-pf{grid-template-columns:minmax(0,1fr);gap:48px;}
}

/* ---------- Phone (up to 575) ---------- */
@media (max-width:575px){
	.pha{--pha-gutter:16px;--eds-subnav-h:51px;}
	.pha-sec{padding:48px 0;}
	.pha-hero{padding:32px 0 40px;}
	.pha h1{font-size:30px;}
	.pha-hero__lede{font-size:18px;}
	.pha-stats{padding-bottom:40px;}
	.pha-stats__grid{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:12px;}
	.pha-stat{flex-direction:row;align-items:center;}
	.pha .pha-subnav ul{gap:22px;height:49px;}
	.pha-table table{min-width:0;width:1024px;}  /* 124 + 6 x 150: the epp-compare phone sizes */
	.pha-table thead th:first-child{width:124px;}
	.pha-table th,.pha-table td{padding:12px 14px;font-size:15px;}
	.pha-tiles{grid-template-columns:minmax(0,1fr);gap:12px;}
	.pha-sys{grid-template-columns:minmax(0,1fr);padding:16px;gap:28px;}
	.pha-choose{grid-template-columns:minmax(0,1fr);}
	.pha-choose__card{padding:24px;}
	.pha-project img{height:200px;}
}