/* SPDX-License-Identifier: LicenseRef-Vahini-Proprietary
   © 2026 Vahini Technologies. All rights reserved.

   pen-hero.css — the homepage hero.

   Ported from a Claude Design artboard (1716x916). The artboard sized
   everything in cqw against a fixed aspect ratio, which scales uniformly
   and therefore does not reflow: at 390px the whole hero rendered as a
   200px strip with roughly 5px body text. So this file is mobile-first.
   Phones get a normal stacked hero at readable sizes; the artboard layout
   only switches on at 1100px, where there is room for it (the site's usual
   880px leaves the step captions under 7px; see the breakpoint note below).

   Every colour is a theme token. The active theme is chosen in
   js/theme.config.js and this hero follows it like every other page.
   The illustration SVG carries the one set of literal colours here, since
   it is a drawing of a specific red pen rather than themed chrome.
   ============================================================ */
.ph{position:relative;padding:26px 0 0;background:radial-gradient(70% 80% at 50% 35%,var(--surface) 0%,var(--ivory) 55%,var(--ivory-2) 100%);overflow:hidden}.ph__frame{position:relative}.ph__copy{position:relative;z-index:3;padding:0 20px;max-width:640px}@media(min-width:700px)and (max-width:1099px){.ph__copy{margin:0 auto;padding:0 32px}}.ph__eye{margin:0;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}.ph__h1{margin:10px 0 0;font-family:var(--serif);font-weight:600;font-size:clamp(38px,11vw,64px);line-height:.95;letter-spacing:-.025em;color:var(--ink)}.ph__rule{display:block;width:150px;height:8px;margin:6px 0 0 auto;max-width:58%}.ph__rule path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}.ph__sub{margin:16px 0 0;font-size:16.5px;line-height:1.5;color:var(--muted);max-width:34em;text-wrap:pretty}.ph__cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;padding:15px 30px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--sans);font-size:16px;font-weight:600;text-decoration:none;box-shadow:0 8px 22px #1f6fd147;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}.ph__cta:hover{background:var(--accent-deep);color:#fff;transform:translateY(-1px);box-shadow:0 10px 26px #1f6fd157}.ph__cta:active{transform:none}.ph__cta svg{width:17px;height:17px}.ph__note{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--hint);max-width:34em}.ph__art{position:relative;z-index:1;margin-top:26px;height:auto;aspect-ratio:1140 / 680;overflow:hidden}.ph-scene{position:absolute;left:50%;top:50%;width:150%;height:auto;aspect-ratio:1716 / 916;transform:translate(-65%,-47%)}.ph-pad,.ph-pad__words{display:none}.ph-steps{position:relative;z-index:4;margin:0;padding:22px 20px 6px;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:16px 18px;background:var(--surface)}.ph-step{display:flex;align-items:flex-start;gap:10px}.ph-step__n{flex:none;width:21px;height:21px;margin-top:1px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--sans);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}.ph-step__t{display:flex;flex-direction:column;gap:2px;min-width:0}.ph-step__t b{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}.ph-step__t span{font-size:13px;line-height:1.35;color:var(--muted)}.ph-step svg{width:20px;height:20px;margin-bottom:2px;fill:none;stroke:var(--ink)}.ph-nots{position:relative;z-index:4;margin:0;padding:14px 20px 26px;list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;background:var(--surface)}.ph-nots li{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}.ph-nots svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--ink)}@media(min-width:1100px){.ph{padding:0}.ph__frame{container-type:inline-size;aspect-ratio:1716 / 916;max-height:88vh;margin:0 auto}.ph__copy{position:absolute;left:8%;top:16%;width:30%;max-width:none;padding:0;display:flex;flex-direction:column;align-items:flex-start}.ph__eye{font-size:max(11px,1.05cqw);letter-spacing:.22em}.ph__h1{margin:.5cqw 0 0;font-size:6.4cqw;line-height:.92}.ph__rule{width:15cqw;height:.8cqw;margin:.2cqw 0 0 12cqw;max-width:none}.ph__sub{margin:1.2cqw 0 0;font-size:max(14px,1.28cqw);line-height:1.45;max-width:24.5cqw}.ph__cta{margin-top:1.6cqw;padding:0 2cqw;min-width:17.8cqw;height:3.7cqw;gap:.8cqw;font-size:max(14px,1.17cqw);box-shadow:0 .7cqw 1.8cqw #1f6fd14d}.ph__cta svg{width:1.1cqw;height:1.1cqw}.ph__note{margin-top:.7cqw;font-size:max(12px,1cqw);max-width:24.5cqw}.ph__art{position:absolute;inset:0;margin:0;height:auto;aspect-ratio:auto;overflow:visible}.ph-scene{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;overflow:visible;pointer-events:none}.ph-pad{display:block;position:absolute;left:-13.5%;top:73.5%;width:33%;height:40%;z-index:1;transform:rotate(30deg);transform-origin:50% 50%}.ph-steps,.ph-nots{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 12%,var(--surface) 24%,var(--surface) 100%)}.ph-steps{margin-top:calc(-.16*min(100vw * 916 / 1716,88vh));padding:36px 32px 8px;display:flex;justify-content:center;align-items:center;gap:3.4vw;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 36px);mask-image:linear-gradient(180deg,#0000 0,#000 36px)}.ph-step{align-items:center;gap:12px;flex:none}.ph-step__n{width:24px;height:24px;margin:0;font-size:12px}.ph-step__t{gap:3px}.ph-step__t b{font-size:12px;letter-spacing:.14em}.ph-step__t span{font-size:13.5px}.ph-step svg{width:22px;height:22px;margin:0}.ph-nots{padding:14px 32px 26px;justify-content:center;gap:0}.ph-nots li{font-size:14px;gap:8px;padding:0 22px;border-right:1px solid var(--rule)}.ph-nots li:last-child{border-right:0}.ph-nots svg{width:17px;height:17px}}@media(prefers-reduced-motion:reduce){.ph-scene [data-a=caret]{display:none}}.ph__h1{font-size:clamp(38px,9.8vw,60px)}.ph-controls{position:relative;z-index:4;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 24px;padding:8px 20px 20px;color:var(--muted);font:12px var(--sans)}.ph-controls__buttons{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}.ph-controls__buttons[hidden]{display:none}.ph-controls button,.ph-controls select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:7px 10px;cursor:pointer}.ph-controls label{display:flex;align-items:center;gap:7px}.ph-controls :focus-visible{outline:2px solid var(--accent);outline-offset:3px}.growth-links{margin-top:22px;line-height:1.8;font-size:15px}.growth-links a{text-decoration:underline;text-underline-offset:3px}@media(min-width:1100px){.ph__copy{top:12%}.ph__h1{font-size:5cqw}.ph__sub{font-size:max(14px,1.2cqw);max-width:27cqw}.ph__note{max-width:28cqw}}@media(max-width:380px){.ph__cta{padding-inline:20px;font-size:15px}}.ph-mobile-caption{display:none}@media(max-width:1099px){.ph-annotations{display:none}.ph-mobile-caption{display:block;text-align:center;margin:8px 20px 18px;font-size:15px;font-weight:600;color:var(--ink)}.ph-mobile-caption span{color:var(--accent);padding:0 6px}.ph-mobile-caption small{display:block;margin-top:5px;font-size:12px;font-weight:400;color:var(--muted)}.ph__h1{width:fit-content;line-height:1.02}.ph__rule{margin-left:72px;margin-right:0;width:180px;max-width:65%}}