/* ==========================================================================
   iTech Advanced Repair Hub — component stylesheet
   --------------------------------------------------------------------------
   Harvested from the live prototype at itech-apple-pro.aji-margono.chatgpt.site
   (Tailwind v4 preflight stripped; only the authored rules are kept).

   Scoping: every rule is prefixed `.arh-page` and every custom property is
   renamed `--arh-*`, so this can be enqueued on the same WordPress install as
   the existing U4R `itech-*` stylesheet without either overriding the other.
   The Bricks templates put `.arh-page` on the outermost section of each area.

   Section 1 = harvested rules, unchanged apart from scoping.
   Section 2 = fixes for the accessibility/UX findings from the 17 Aug audit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Harvested rules
   -------------------------------------------------------------------------- */
:root{--arh-ink:#10152d;--arh-navy:#171842;--arh-navy2:#0c1230;--arh-red:#ef4769;--arh-cream:#f7f7f2;--arh-paper:#fff;--arh-muted:#687083;--arh-line:#dedfe4;--arh-green:#51d6a4;--arh-shadow:0 24px 70px #1218341f}
.arh-page *{box-sizing:border-box}
html{scroll-behavior:smooth}
.arh-page{background:var(--arh-cream);color:var(--arh-ink);font-family:var(--font-geist-sans),Arial,sans-serif;margin:0}
.arh-page a{color:inherit;text-decoration:none}
.arh-page button,.arh-page select,.arh-page textarea{font:inherit}
.arh-page .section-shell{width:min(1180px,100% - 48px);margin-inline:auto}
.arh-page .section-pad{padding-top:116px;padding-bottom:116px}
.arh-page .site-header{z-index:10;border-bottom:1px solid #10152d1a;justify-content:space-between;align-items:center;width:min(1240px,100% - 40px);height:86px;margin:0 auto;display:flex;position:relative}
.arh-page .brand{align-items:center;min-width:238px;height:42px;display:flex;position:relative}
.arh-page .brand img{object-fit:contain;z-index:2;max-width:128px;height:38px;position:absolute;top:2px;left:0}
.arh-page .brand-fallback{letter-spacing:-1.7px;width:124px;color:var(--arh-navy);font-size:30px;font-weight:800}
.arh-page .brand-divider{background:#cfd0d7;width:1px;height:32px;margin:0 14px}
.arh-page .brand-sub{text-transform:uppercase;letter-spacing:.16em;color:#5e6577;font-size:10px;font-weight:700;line-height:1.15}
.arh-page .site-header nav{gap:34px;display:flex}
.arh-page .site-header nav a{color:#4e566a;font-size:13px;font-weight:600}
.arh-page .header-actions{align-items:center;gap:17px;display:flex}
.arh-page .lang-switch{color:#9a9eaa;cursor:pointer;background:0 0;border:0;align-items:center;gap:7px;font-size:11px;font-weight:700;display:flex}
.arh-page .lang-switch span.active{color:var(--arh-ink)}
.arh-page .lang-switch i{background:#c7c9d0;width:1px;height:12px}
.arh-page .button{cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;gap:12px;padding:15px 22px;font-size:13px;font-weight:700;transition:transform .2s,background .2s,box-shadow .2s;display:inline-flex}
.arh-page .button:hover{transform:translateY(-2px)}
.arh-page .button-small{padding:11px 17px}
.arh-page .button-dark{background:var(--arh-navy);color:#fff}
.arh-page .button-primary{background:var(--arh-red);color:#fff;box-shadow:0 14px 28px #ef47693d}
.arh-page .button-ghost{border:1px solid var(--arh-line);background:#fff}
.arh-page .button-accent{background:var(--arh-green);color:var(--arh-navy2)}
.arh-page .icon{border-radius:50%;place-items:center;width:23px;height:23px;font-size:13px;line-height:1;display:inline-grid}
.arh-page .button .icon{background:#ffffff38}
.arh-page .hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:72px;min-height:760px;padding:96px 0 100px;display:grid}
.arh-page .eyebrow,.arh-page .section-kicker{letter-spacing:.17em;text-transform:uppercase;color:#555e73;align-items:center;gap:9px;font-size:11px;font-weight:750;display:flex}
.arh-page .pulse{background:var(--arh-green);border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 5px #51d6a42e}
.arh-page .hero h1{letter-spacing:-.061em;max-width:670px;margin:31px 0 28px;font-size:clamp(55px,6vw,83px);font-weight:720;line-height:.97}
.arh-page .hero h1 em{color:var(--arh-red);font-style:normal}
.arh-page .hero-intro{color:#5c6477;max-width:630px;font-size:18px;line-height:1.75}
.arh-page .button-row{gap:12px;margin-top:34px;display:flex}
.arh-page .trust-line{color:#5b6375;flex-wrap:wrap;gap:24px;margin-top:38px;font-size:12px;display:flex}
.arh-page .trust-line span{align-items:center;gap:8px;display:flex}
.arh-page .trust-line .icon{color:#167556;background:#e4f7ee;width:20px;height:20px;font-weight:800}
.arh-page .hero-visual{position:relative}
.arh-page .board-card{color:#fff;background:linear-gradient(145deg,#181a45,#090e29);border-radius:34px;padding:25px;transform:rotate(1.7deg);box-shadow:0 40px 90px #0c123047}
.arh-page .board-top{font:600 9px var(--font-geist-mono);letter-spacing:.14em;color:#aeb4cc;justify-content:space-between;align-items:center;display:flex}
.arh-page .live-dot{color:var(--arh-green)}
.arh-page .circuit-field{background-color:#0b1130;background-image:radial-gradient(circle,#5ad8ac21 1px,#0000 1px);background-size:18px 18px;border:1px solid #ffffff14;border-radius:24px;height:375px;margin:20px 0;position:relative;overflow:hidden}
.arh-page .circuit-field:before,.arh-page .circuit-field:after{content:"";border:1px solid #51d6a442;border-radius:50%;width:260px;height:260px;position:absolute;top:58px;left:82px}
.arh-page .circuit-field:after{width:170px;height:170px;top:103px;left:127px}
.arh-page .chip{color:#8a93b7;font:600 9px var(--font-geist-mono);background:#151d46;border:1px solid #ffffff26;border-radius:5px;padding:8px 10px;position:absolute}
.arh-page .chip-a{top:45px;left:40px}
.arh-page .chip-b{top:70px;right:45px}
.arh-page .chip-c{bottom:55px;left:55px}
.arh-page .trace{background:linear-gradient(90deg,transparent,var(--arh-green),transparent);transform-origin:0;height:1px;position:absolute}
.arh-page .t1{width:270px;top:125px;left:25px;transform:rotate(17deg)}
.arh-page .t2{width:250px;top:250px;left:140px;transform:rotate(-29deg)}
.arh-page .t3{width:210px;top:285px;left:42px;transform:rotate(-51deg)}
.arh-page .t4{width:160px;top:80px;left:225px;transform:rotate(76deg)}
.arh-page .node{border:2px solid var(--arh-green);width:8px;height:8px;box-shadow:0 0 18px var(--arh-green);background:#0b1130;border-radius:50%;position:absolute}
.arh-page .n1{top:158px;left:142px}
.arh-page .n2{top:142px;right:94px}
.arh-page .n3{bottom:93px;left:99px}
.arh-page .n4{bottom:69px;right:123px}
.arh-page .scan-ring{background:#070c24e0;border:1px solid #51d6a473;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:128px;height:128px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 60px #51d6a424}
.arh-page .scan-ring span{font:500 25px var(--font-geist-mono);color:#d7fff0}
.arh-page .scan-ring small{font:600 7px var(--font-geist-mono);letter-spacing:.14em;color:#66dcb0;margin-top:6px}
.arh-page .readouts{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}
.arh-page .readouts span{font:500 12px var(--font-geist-mono);background:#ffffff0b;border-radius:11px;padding:12px}
.arh-page .readouts small{color:#7e86a8;margin-bottom:5px;font-size:7px;display:block}
.arh-page .route-card{border:1px solid var(--arh-line);box-shadow:var(--arh-shadow);background:#fff;border-radius:18px;align-items:center;gap:12px;padding:15px 18px;display:flex;position:absolute;bottom:-48px;left:-38px}
.arh-page .route-pin{background:var(--arh-red);color:#fff;border-radius:12px;place-items:center;width:38px;height:38px;font-weight:800;display:grid}
.arh-page .route-card div{flex-direction:column;display:flex}
.arh-page .route-card b{font-size:12px}
.arh-page .route-card small{color:var(--arh-muted);margin-top:4px;font-size:9px}
.arh-page .section-heading{grid-template-columns:1fr 1.7fr 1.1fr;align-items:start;gap:50px;margin-bottom:54px;display:grid}
.arh-page .section-heading h2,.arh-page .proof-intro h2,.arh-page .audience h2,.arh-page .final-cta h2{letter-spacing:-.047em;margin:0;font-size:clamp(38px,4.4vw,62px);line-height:1.04}
.arh-page .section-heading p,.arh-page .proof-intro p,.arh-page .audience p,.arh-page .final-cta p{color:var(--arh-muted);margin:0;font-size:16px;line-height:1.75}
.arh-page .section-heading.compact{grid-template-columns:.8fr 1.9fr 1.1fr}
.arh-page .cap-grid{border-top:1px solid var(--arh-line);border-left:1px solid var(--arh-line);grid-template-columns:1fr 1fr;display:grid}
.arh-page .cap-card{border-right:1px solid var(--arh-line);border-bottom:1px solid var(--arh-line);background:#ffffff52;gap:24px;min-height:220px;padding:35px;display:flex;position:relative}
.arh-page .cap-card>.icon{border:1px solid var(--arh-line);width:50px;height:50px;color:var(--arh-red);background:#fff;flex:0 0 50px;font-size:24px}
.arh-page .cap-card h3,.arh-page .proof-grid h3{margin:4px 0 10px;font-size:19px}
.arh-page .cap-card p,.arh-page .proof-grid p{color:var(--arh-muted);margin:0;font-size:14px;line-height:1.7}
.arh-page .card-index{font:500 10px var(--font-geist-mono);color:#a6aab4;position:absolute;top:24px;right:24px}
.arh-page .diagnosis-wrap{background:var(--arh-navy2);color:#fff;border-radius:38px;grid-template-columns:.75fr 1.25fr;gap:75px;padding:72px;display:grid}
.arh-page .section-kicker.light{color:#88e8c3}
.arh-page .diagnosis-copy h2{letter-spacing:-.045em;margin:20px 0;font-size:51px;line-height:1.02}
.arh-page .diagnosis-copy>p{color:#aeb5ca;line-height:1.7}
.arh-page .lab-status{border-top:1px solid #ffffff1a;align-items:center;gap:13px;margin-top:54px;padding-top:24px;display:flex}
.arh-page .lab-status>span{background:var(--arh-green);border-radius:50%;width:10px;height:10px;box-shadow:0 0 0 6px #51d6a41c}
.arh-page .lab-status div{flex-direction:column;display:flex}
.arh-page .lab-status b{font-size:12px}
.arh-page .lab-status small{color:#8f98b4;margin-top:4px}
.arh-page .diagnosis-form{color:var(--arh-ink);background:#fff;border-radius:24px;grid-template-columns:1fr 1fr;gap:18px;padding:30px;display:grid}
.arh-page .diagnosis-form label,.arh-page .diagnosis-form fieldset{color:#5b6272;flex-direction:column;gap:8px;font-size:11px;font-weight:700;display:flex}
.arh-page .diagnosis-form select,.arh-page .diagnosis-form textarea{width:100%;color:var(--arh-ink);background:#f9f9f7;border:1px solid #dedfe5;border-radius:12px;outline:none;padding:14px}
.arh-page .diagnosis-form select:focus,.arh-page .diagnosis-form textarea:focus{border-color:var(--arh-red);box-shadow:0 0 0 3px #ef47691a}
.arh-page .full{grid-column:1/-1}
.arh-page .diagnosis-form fieldset{border:0;margin:0;padding:0}
.arh-page .radio-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}
.arh-page .radio-row label{border:1px solid var(--arh-line);cursor:pointer;border-radius:12px;padding:13px 14px;position:relative}
.arh-page .radio-row label.selected{border-color:var(--arh-red);background:#fff5f7}
.arh-page .radio-row input{opacity:0;position:absolute}
.arh-page .radio-row span{color:var(--arh-ink);font-size:13px}
.arh-page .radio-row small{font-weight:400}
.arh-page .diagnosis-form .button{border-radius:12px}
.arh-page .form-note{margin:0;text-align:center!important;color:#7a8190!important;font-size:10px!important}
.arh-page .device-grid{grid-template-columns:repeat(7,1fr);gap:10px;display:grid}
.arh-page .device-grid article{border:1px solid var(--arh-line);background:#fff;border-radius:18px;flex-direction:column;justify-content:flex-end;min-height:190px;padding:22px 15px;display:flex}
.arh-page .device-grid h3{margin:16px 0 5px;font-size:15px}
.arh-page .device-grid small{color:var(--arh-muted);font-size:9px;line-height:1.45}
.arh-page .device-shape{height:70px;display:block;position:relative}
.arh-page .device-shape:before{content:"";background:linear-gradient(145deg,#fff,#e9eaeb);border:2px solid #252c47;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 3px #fff}
.arh-page .device-0:before{border-radius:9px;width:33px;height:66px}
.arh-page .device-1:before{border-bottom-width:7px;border-radius:4px;width:80px;height:50px}
.arh-page .device-2:before{border-radius:6px;width:48px;height:65px}
.arh-page .device-3:before{border-radius:5px;width:75px;height:52px}
.arh-page .device-4:before{border-radius:9px;width:62px;height:28px}
.arh-page .device-5:before{border-radius:13px;width:45px;height:52px}
.arh-page .device-6:before{border-radius:18px;width:58px;height:44px}
.arh-page .routine-strip{background:#e8e9e4;border-radius:16px;justify-content:space-between;align-items:center;margin-top:22px;padding:20px 26px;font-size:13px;font-weight:600;display:flex}
.arh-page .routine-strip div{gap:24px;display:flex}
.arh-page .routine-strip a{color:var(--arh-red)}
.arh-page .process{background:#fff}
.arh-page .process-list{border-top:1px solid var(--arh-line);margin-left:calc(30% + 20px)}
.arh-page .process-list article{border-bottom:1px solid var(--arh-line);grid-template-columns:70px 180px 1fr;align-items:start;gap:25px;padding:28px 0;display:grid}
.arh-page .process-list>article>span{font:500 11px var(--font-geist-mono);color:var(--arh-red)}
.arh-page .process-list h3{margin:0;font-size:16px}
.arh-page .process-list p{color:var(--arh-muted);margin:0;font-size:13px;line-height:1.65}
.arh-page .proof{grid-template-columns:.75fr 1.25fr;gap:80px;display:grid}
.arh-page .proof-intro h2{margin:22px 0}
.arh-page .proof-grid{grid-template-columns:1fr 1fr;gap:17px;display:grid}
.arh-page .proof-grid article{border:1px solid var(--arh-line);background:#fff;border-radius:22px;padding:18px}
.arh-page .proof-grid article:last-child{grid-column:1/-1;grid-template-columns:210px 1fr;align-items:center;column-gap:24px;display:grid}
.arh-page .proof-grid article:last-child h3{align-self:end}
.arh-page .proof-grid article:last-child p{align-self:start}
.arh-page .proof-visual{color:#d9ffee;height:145px;font:500 28px var(--font-geist-mono);background:#111735;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}
.arh-page .proof-visual:after{content:"";border:1px solid #51d6a459;border-radius:50%;width:90px;height:90px;position:absolute;box-shadow:0 0 0 25px #51d6a409,0 0 0 50px #51d6a406}
.arh-page .proof-visual small{letter-spacing:.18em;color:#72dcb5;margin-top:8px;font-size:7px}
.arh-page .proof-2{color:#ffd268;letter-spacing:.15em;background:linear-gradient(120deg,#171842,#292351);height:110px;font-size:16px}
.arh-page .audience{background:var(--arh-navy);color:#fff;border-radius:34px;grid-template-columns:1.15fr .85fr;align-items:center;gap:70px;padding:65px 72px;display:grid}
.arh-page .audience h2{margin:20px 0}
.arh-page .audience p{color:#aeb5ca}
.arh-page .audience-list{border-top:1px solid #ffffff1f;border-left:1px solid #ffffff1f;grid-template-columns:1fr 1fr;display:grid}
.arh-page .audience-list span{border-bottom:1px solid #ffffff1f;border-right:1px solid #ffffff1f;flex-direction:column;justify-content:space-between;height:100px;padding:20px;font-size:12px;display:flex}
.arh-page .audience-list i{font:400 8px var(--font-geist-mono);color:var(--arh-green);font-style:normal}
.arh-page .location-grid{grid-template-columns:1fr 1fr;gap:20px;display:grid}
.arh-page .location-card{border:1px solid var(--arh-line);background:#fff;border-radius:28px;padding:42px}
.arh-page .location-card.featured{background:#fff8f9;border-color:#f4c9d2}
.arh-page .location-top{font:600 9px var(--font-geist-mono);letter-spacing:.14em;justify-content:space-between;display:flex}
.arh-page .location-top b{color:var(--arh-red)}
.arh-page .location-card h3{letter-spacing:-.04em;margin:35px 0 8px;font-size:34px}
.arh-page .location-card strong{text-transform:uppercase;letter-spacing:.1em;color:#646c7d;font-size:11px}
.arh-page .location-card p{color:var(--arh-muted);max-width:400px;font-size:14px;line-height:1.6}
.arh-page .location-card address{border-top:1px solid var(--arh-line);margin-top:28px;padding:24px 0;font-size:13px;font-style:normal;line-height:1.7}
.arh-page .location-actions{align-items:center;gap:22px;display:flex}
.arh-page .location-actions>a:not(.button){color:#555d6d;font-size:12px;font-weight:700}
.arh-page .faq{grid-template-columns:.75fr 1.25fr;gap:70px;display:grid}
.arh-page .faq .section-heading{display:block}
.arh-page .faq .section-heading h2{margin-top:18px}
.arh-page .faq-list{border-top:1px solid #cfd1d6}
.arh-page .faq-list article{border-bottom:1px solid #cfd1d6}
.arh-page .faq-list button{text-align:left;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;width:100%;padding:23px 0;font-weight:650;display:flex}
.arh-page .faq-list button i{color:var(--arh-red);font-size:25px;font-style:normal;font-weight:300}
.arh-page .faq-list article>div{grid-template-rows:0fr;transition:grid-template-rows .25s;display:grid}
.arh-page .faq-list article>div p{color:var(--arh-muted);max-width:680px;margin:0;font-size:14px;line-height:1.7;overflow:hidden}
.arh-page .faq-list article.open>div{grid-template-rows:1fr}
.arh-page .faq-list article.open>div p{padding-bottom:24px}
.arh-page .final-cta{background:var(--arh-navy2);color:#fff;border-radius:34px;grid-template-columns:1fr auto;align-items:center;gap:60px;padding:65px 72px;display:grid}
.arh-page .final-cta h2{max-width:750px;margin:18px 0;font-size:45px}
.arh-page .final-cta p{color:#aeb5ca;max-width:720px}
.arh-page .site-footer{grid-template-columns:280px 1fr auto;align-items:start;gap:50px;padding:65px 0 110px;display:grid}
.arh-page .site-footer p{color:#7b8190;margin:0;font-size:10px;line-height:1.65}
.arh-page .site-footer>div:last-child{gap:22px;font-size:11px;font-weight:700;display:flex}
.arh-page .mobile-sticky{display:none}
@media (max-width:980px){.arh-page .site-header nav{display:none}.arh-page .hero{grid-template-columns:1fr;padding-top:65px}.arh-page .hero-copy{max-width:780px}.arh-page .hero-visual{width:100%;max-width:570px;margin:0 auto}.arh-page .section-heading,.arh-page .section-heading.compact{grid-template-columns:1fr 2fr}.arh-page .section-heading p{grid-column:2}.arh-page .diagnosis-wrap,.arh-page .proof,.arh-page .faq{grid-template-columns:1fr}.arh-page .device-grid{grid-template-columns:repeat(4,1fr)}.arh-page .process-list{margin-left:0}.arh-page .audience{grid-template-columns:1fr}.arh-page .site-footer{grid-template-columns:1fr 1fr}.arh-page .site-footer p{grid-area:2/1/auto/-1}.arh-page .site-footer>div:last-child{justify-self:end}}
@media (max-width:680px){.arh-page .section-shell{width:min(100% - 28px,1180px)}.arh-page .section-pad{padding-top:78px;padding-bottom:78px}.arh-page .site-header{width:calc(100% - 28px);height:72px}.arh-page .brand{min-width:195px}.arh-page .brand img{max-width:105px;height:32px;top:5px}.arh-page .brand-fallback{width:103px;font-size:25px}.arh-page .brand-divider{margin:0 10px}.arh-page .brand-sub{font-size:8px}.arh-page .header-actions .button{display:none}.arh-page .hero{gap:65px;min-height:auto;padding:55px 0 90px}.arh-page .hero h1{font-size:48px}.arh-page .hero-intro{font-size:16px}.arh-page .button-row{flex-direction:column;align-items:stretch}.arh-page .trust-line{flex-direction:column;gap:12px}.arh-page .circuit-field{height:290px}.arh-page .board-card{padding:17px}.arh-page .route-card{bottom:-54px;left:8px;right:8px}.arh-page .section-heading,.arh-page .section-heading.compact{display:block}.arh-page .section-heading h2{margin:18px 0}.arh-page .cap-grid{grid-template-columns:1fr}.arh-page .diagnosis-wrap{border-radius:26px;width:calc(100% - 20px);padding:30px 18px}.arh-page .diagnosis-copy h2{font-size:40px}.arh-page .diagnosis-form{grid-template-columns:1fr;padding:20px}.arh-page .diagnosis-form>*{grid-column:1}.arh-page .radio-row{grid-template-columns:1fr}.arh-page .device-grid{grid-template-columns:1fr 1fr}.arh-page .routine-strip{flex-direction:column;align-items:flex-start;gap:20px}.arh-page .process-list article{grid-template-columns:45px 1fr}.arh-page .process-list p{grid-column:2}.arh-page .proof{gap:45px}.arh-page .proof-grid{grid-template-columns:1fr}.arh-page .proof-grid article:last-child{grid-column:auto;display:block}.arh-page .proof-grid article:last-child .proof-visual{height:145px}.arh-page .audience{border-radius:25px;width:calc(100% - 20px);padding:38px 22px}.arh-page .audience-list,.arh-page .location-grid{grid-template-columns:1fr}.arh-page .location-card{padding:28px}.arh-page .faq{gap:25px}.arh-page .final-cta{border-radius:25px;grid-template-columns:1fr;width:calc(100% - 20px);padding:40px 24px}.arh-page .final-cta h2{font-size:38px}.arh-page .site-footer{grid-template-columns:1fr;padding-bottom:105px}.arh-page .site-footer>div:last-child{justify-self:start}.arh-page .mobile-sticky{z-index:30;background:var(--arh-green);color:var(--arh-navy2);border-radius:999px;justify-content:space-between;align-items:center;padding:17px 20px;font-size:13px;font-weight:800;display:flex;position:fixed;bottom:12px;left:12px;right:12px;box-shadow:0 10px 35px #08122847}.arh-page .mobile-sticky .icon{background:#fff6}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.arh-page .button{transition:none}}

/* --------------------------------------------------------------------------
   2. Audit fixes (not present in the harvested prototype)
   -------------------------------------------------------------------------- */

/* Focus: the prototype styled only select/textarea. Every interactive element
   now carries a visible ring, and :focus-visible keeps it off mouse clicks. */
.arh-page a:focus-visible,
.arh-page button:focus-visible,
.arh-page select:focus-visible,
.arh-page textarea:focus-visible,
.arh-page input:focus-visible {
  outline: 3px solid var(--arh-red);
  outline-offset: 3px;
  border-radius: 6px;
}
.arh-page .button:focus-visible,
.arh-page .mobile-sticky:focus-visible {
  outline: 3px solid var(--arh-navy);
  outline-offset: 3px;
}
.arh-page .button-dark:focus-visible,
.arh-page .button-primary:focus-visible {
  outline-color: var(--arh-green);
}

/* Touch: removes the iOS double-tap zoom delay and makes the tap flash
   deliberate rather than the browser default blue. */
.arh-page a,
.arh-page button,
.arh-page select,
.arh-page label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: #10152d1a;
}

/* Sticky CTA must clear the iPhone home indicator. */
.arh-page .mobile-sticky {
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: calc(12px + env(safe-area-inset-left));
  right: calc(12px + env(safe-area-inset-right));
}

/* Measurement readouts are compared vertically — lock the digit widths. */
.arh-page .readouts span,
.arh-page .scan-ring span,
.arh-page .proof-visual span,
.arh-page .card-index,
.arh-page .process-list article > span {
  font-variant-numeric: tabular-nums;
}

/* Headings: prevent single-word widows. */
.arh-page h1,
.arh-page h2,
.arh-page h3 {
  text-wrap: balance;
}

/* Anchor targets clear the header when it is pinned. */
.arh-page section[id] {
  scroll-margin-top: 24px;
}

/* Native select rendering on Windows dark mode. */
.arh-page .diagnosis-form select {
  color-scheme: light;
}

/* Mobile navigation. The prototype simply hid the nav below 980px, leaving no
   way to reach the in-page sections on a phone; this is the disclosure panel
   the Bricks header template toggles. */
.arh-page .nav-trigger { display: none; }
.arh-page .nav-panel[hidden] { display: none; }
@media (max-width: 980px) {
  .arh-page .nav-trigger {
    cursor: pointer;
    background: none;
    border: 1px solid #10152d26;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
  }
  .arh-page .nav-panel {
    background: var(--arh-paper);
    border-bottom: 1px solid #10152d1a;
    flex-direction: column;
    gap: 4px;
    padding: 8px 14px 18px;
    display: flex;
  }
  .arh-page .nav-panel a {
    border-bottom: 1px solid #10152d0f;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 600;
  }
}

/* The FAQ panel animates its grid rows; honour reduced motion there too. */
@media (prefers-reduced-motion: reduce) {
  .arh-page .faq-list article > div { transition: none; }
}

/* Form status line, announced politely after a submit. */
.arh-page .form-status {
  color: var(--arh-muted);
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
}
.arh-page .form-status[data-state="error"] { color: var(--arh-red); font-weight: 600; }

/* FAQ — Bricks accordion structure.
   The prototype's FAQ was hand-rolled (`article > button` + a grid-row height
   trick). The template uses Bricks' accordion element instead, so the FAQ stays
   a real editable repeater and Bricks owns the aria-expanded/aria-controls
   wiring and the open/close animation. These rules re-dress Bricks' markup
   (ul.accordion-item / .accordion-title-wrapper / .accordion-content-wrapper,
   open state = .brx-open) to look like the prototype. */
.arh-page .faq-list {
  border-top: 1px solid #cfd1d6;
  margin: 0;
  padding: 0;
  list-style: none;
}
.arh-page .faq-list .accordion-item {
  border-bottom: 1px solid #cfd1d6;
}
.arh-page .faq-list .accordion-title-wrapper {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 23px 0;
  display: flex;
}
.arh-page .faq-list .accordion-title {
  flex: 1;
}
.arh-page .faq-list .title {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
}
/* The +/− marker. Driven by aria-expanded, which Bricks keeps current, so it
   never disagrees with what a screen reader is told. */
.arh-page .faq-list .accordion-title-wrapper::after {
  content: "+";
  color: var(--arh-red);
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
}
.arh-page .faq-list .accordion-title-wrapper[aria-expanded="true"]::after {
  content: "−";
}
.arh-page .faq-list .accordion-icon { display: none; }
.arh-page .faq-list .accordion-content-wrapper p {
  color: var(--arh-muted);
  max-width: 680px;
  margin: 0;
  padding-bottom: 24px;
  font-size: 14px;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   3. Layout and readability corrections

   Two problems carried over from the prototype, reported 17 Aug:

   a) Grids declared with more columns than they have children, so the last
      track sat empty. `.process-list article` was the worst: three columns
      (70px 180px 1fr) against two children, which crammed the heading and body
      into 180px and left a 506px column blank at 1180px wide.

   b) A body-text scale that ran small — 13px paragraphs, 10px footer, 9px
      device captions — well under the 16px that reads comfortably at arm's
      length.

   Both are fixed here rather than in the templates so no Bricks re-import is
   needed. Sizes are nudged up, not redesigned: the headline scale, spacing
   rhythm and colour are untouched.
   -------------------------------------------------------------------------- */

/* a) Process list: promote the wrapper so the heading and body become real grid
   items, then give the body the width that was going to waste. */
.arh-page .process-list article > div {
  display: contents;
}
.arh-page .process-list article {
  grid-template-columns: 60px minmax(140px, 220px) minmax(0, 1fr);
  align-items: baseline;
  gap: 32px;
  padding: 32px 0;
}
.arh-page .process-list {
  /* was calc(30% + 20px) — a third of the section was blank down its length */
  margin-left: calc(18% + 20px);
}
.arh-page .process-list h3 {
  font-size: 21px;
  letter-spacing: -.02em;
}
.arh-page .process-list p {
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.7;
}
.arh-page .process-list > article > span {
  font-size: 13px;
}

/* a) Section headings: when the kicker and h2 are the only children, let the
   h2 run into the trailing column instead of leaving it empty. */
.arh-page .section-heading.compact h2:last-child {
  grid-column: 2 / -1;
}

/* b) Body copy. */
.arh-page .section-heading p,
.arh-page .proof-intro p,
.arh-page .audience p,
.arh-page .final-cta p {
  font-size: 18px;
}
.arh-page .cap-card p,
.arh-page .proof-grid p,
.arh-page .location-card p {
  font-size: 16px;
  line-height: 1.65;
}
.arh-page .device-grid h3 {
  font-size: 17px;
}
.arh-page .device-grid small {
  font-size: 12px;
  line-height: 1.5;
}
.arh-page .faq-list .title {
  font-size: 18px;
}
.arh-page .faq-list .accordion-content-wrapper p {
  font-size: 16px;
}
.arh-page .site-footer p {
  font-size: 13px;
  line-height: 1.7;
}
.arh-page .site-footer > div:last-child {
  font-size: 13px;
}
.arh-page .button {
  font-size: 15px;
}
.arh-page .cap-card h3,
.arh-page .proof-grid h3,
.arh-page .location-card h3 {
  font-size: 21px;
}

/* The device captions grew, so the cards need room not to reflow awkwardly. */
.arh-page .device-grid article {
  min-height: 205px;
}

@media (max-width: 980px) {
  /* The indent only earns its keep beside a heading; below the breakpoint the
     heading stacks above and the indent is pure waste. */
  .arh-page .process-list {
    margin-left: 0;
  }
  .arh-page .process-list article {
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 8px 20px;
  }
  .arh-page .process-list p {
    grid-column: 2;
  }
}

/* --------------------------------------------------------------------------
   4. Decorative elements that never rendered

   Five purely decorative nodes were authored in the templates as text-basic
   elements with empty text: the device silhouettes, the brand divider, the
   hero pulse dot, the lab-status dot and the EN/ID separator.

   Bricks' text-basic.php:82 returns early when settings['text'] is empty, so
   none of them ever reached the page — the device cards in particular rendered
   as blank boxes. They are redrawn here as pseudo-elements on their parents,
   which keeps the fix out of the templates and avoids a re-import.

   If the templates are ever regenerated, use a layout element (div) rather
   than text-basic for empty decorative nodes, and delete this section.
   -------------------------------------------------------------------------- */

/* Device silhouettes. The band the original .device-shape span occupied was
   70px tall, so each shape carries the leftover as symmetric vertical margin. */
.arh-page .device-grid article::before {
  content: "";
  display: block;
  background: linear-gradient(145deg, #fff, #e9eaeb);
  border: 2px solid #252c47;
  box-shadow: inset 0 0 0 3px #fff;
  flex: none;
}
.arh-page .device-grid article:nth-child(1)::before { /* iPhone */
  width: 33px; height: 66px; border-radius: 9px; margin: 2px auto;
}
.arh-page .device-grid article:nth-child(2)::before { /* MacBook */
  width: 80px; height: 50px; border-radius: 4px; border-bottom-width: 7px;
  margin: 10px auto;
}
.arh-page .device-grid article:nth-child(3)::before { /* iPad */
  width: 48px; height: 65px; border-radius: 6px; margin: 2.5px auto;
}
.arh-page .device-grid article:nth-child(4)::before { /* iMac */
  width: 75px; height: 52px; border-radius: 5px; margin: 9px auto;
}
.arh-page .device-grid article:nth-child(5)::before { /* Mac mini */
  width: 62px; height: 28px; border-radius: 9px; margin: 21px auto;
}
.arh-page .device-grid article:nth-child(6)::before { /* Apple Watch */
  width: 45px; height: 52px; border-radius: 13px; margin: 9px auto;
}
.arh-page .device-grid article:nth-child(7)::before { /* AirPods */
  width: 58px; height: 44px; border-radius: 18px; margin: 13px auto;
}

/* Brand divider between the wordmark and "Advanced Repair Hub". */
.arh-page .brand .brand-sub {
  border-left: 1px solid #cfd0d7;
  justify-content: center;
  min-height: 32px;
  margin-left: 14px;
  padding-left: 14px;
  display: flex;
  flex-direction: column;
}

/* Hero eyebrow pulse. */
.arh-page .eyebrow::before {
  content: "";
  background: var(--arh-green);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  flex: none;
  box-shadow: 0 0 0 5px #51d6a42e;
}

/* Lab-status dot. */
.arh-page .lab-status::before {
  content: "";
  background: var(--arh-green);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  flex: none;
  box-shadow: 0 0 0 6px #51d6a41c;
}

/* EN | ID separator, as a border rather than a spacer element. */
.arh-page .lang-switch button + button {
  border-left: 1px solid #c7c9d0;
  padding-left: 7px;
}

/* The language buttons are Bricks button elements, which arrive carrying
   .bricks-button — grey pill padding and a background the prototype never had.
   Strip it back to the plain EN/ID text of the original. */
.arh-page .lang-switch button {
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 0 0 7px;
  font: inherit;
  font-weight: 700;
}
.arh-page .lang-switch button:first-child {
  padding-left: 0;
}
.arh-page .lang-switch button.active {
  color: var(--arh-ink);
}