/* giga.ai/doordash compiled CSS (Tailwind v4 + site CSS), vars renamed --g-*, scoped by kit/scope.mjs, purged to what body.html uses. Built by build/css.mjs, do not hand-edit. */ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){.pg-diagnostic-results *, .pg-diagnostic-results, .pg-diagnostic-results :before, .pg-diagnostic-results :after, .pg-diagnostic-results ::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-divide-x-reverse:0;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{.pg-diagnostic-results, .pg-diagnostic-results :host{--g-font-sans:var(--g-font-sans-source), var(--g-font-geist-source), "Giga Sans Text Trial 400", "Geist", ui-sans-serif, system-ui, sans-serif;--g-color-black:#000;--g-spacing:.25rem;--g-text-sm:.875rem;--g-text-sm--line-height:calc(1.25 / .875);--g-text-2xl:1.5rem;--g-text-2xl--line-height:calc(2 / 1.5);--g-font-weight-normal:400;--g-font-weight-medium:500;--g-leading-snug:1.375;--g-leading-normal:1.5;--g-radius-md:12px;--g-default-transition-duration:.15s;--g-default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--g-default-font-family:var(--g-font-sans);--g-color-background:var(--g-bg);--g-color-foreground:var(--g-fg);--g-font-geist:var(--g-font-geist-source), "Geist", ui-sans-serif, system-ui, sans-serif;--g-font-display:var(--g-font-pixel-line);--g-font-brand-display:var(--g-font-brand-display-source), "Giga Sans Display Trial 400", ui-sans-serif, system-ui, sans-serif;--g-font-pixel-line:var(--g-font-pixel-line-source), "Geist Pixel Line", ui-monospace, monospace;--g-text-product-hero:clamp(2.75rem, 5.5vw, 4rem);--g-text-product-hero--line-height:1.1;--g-tracking-display:-.03em;--g-container-section:1600px}}@layer base{.pg-diagnostic-results *, .pg-diagnostic-results, .pg-diagnostic-results :after, .pg-diagnostic-results :before, .pg-diagnostic-results ::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}.pg-diagnostic-results ::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}.pg-diagnostic-results, .pg-diagnostic-results :host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--g-default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--g-default-font-feature-settings,normal);font-variation-settings:var(--g-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}.pg-diagnostic-results h1, .pg-diagnostic-results h2{font-size:inherit;font-weight:inherit}.pg-diagnostic-results a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}.pg-diagnostic-results strong{font-weight:bolder}.pg-diagnostic-results :-moz-focusring{outline:auto}.pg-diagnostic-results ul{list-style:none}.pg-diagnostic-results img, .pg-diagnostic-results svg, .pg-diagnostic-results canvas{vertical-align:middle;display:block}.pg-diagnostic-results img{max-width:100%;height:auto}.pg-diagnostic-results button, .pg-diagnostic-results input{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}.pg-diagnostic-results ::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}.pg-diagnostic-results ::file-selector-button{margin-inline-end:4px}.pg-diagnostic-results ::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){.pg-diagnostic-results ::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){.pg-diagnostic-results ::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}.pg-diagnostic-results ::-webkit-search-decoration{-webkit-appearance:none}.pg-diagnostic-results ::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}.pg-diagnostic-results ::-webkit-datetime-edit{display:inline-flex}.pg-diagnostic-results ::-webkit-datetime-edit-fields-wrapper{padding:0}.pg-diagnostic-results ::-webkit-datetime-edit{padding-block:0}.pg-diagnostic-results ::-webkit-datetime-edit-year-field{padding-block:0}.pg-diagnostic-results ::-webkit-datetime-edit-month-field{padding-block:0}.pg-diagnostic-results ::-webkit-datetime-edit-day-field{padding-block:0}.pg-diagnostic-results ::-webkit-datetime-edit-hour-field{padding-block:0}.pg-diagnostic-results ::-webkit-datetime-edit-minute-field{padding-block:0}.pg-diagnostic-results ::-webkit-datetime-edit-second-field{padding-block:0}.pg-diagnostic-results ::-webkit-datetime-edit-millisecond-field{padding-block:0}.pg-diagnostic-results ::-webkit-datetime-edit-meridiem-field{padding-block:0}.pg-diagnostic-results ::-webkit-calendar-picker-indicator{line-height:1}.pg-diagnostic-results :-moz-ui-invalid{box-shadow:none}.pg-diagnostic-results button{appearance:button}.pg-diagnostic-results ::file-selector-button{appearance:button}.pg-diagnostic-results ::-webkit-inner-spin-button{height:auto}.pg-diagnostic-results ::-webkit-outer-spin-button{height:auto}}@layer components;.pg-diagnostic-results.pg-diagnostic-results .sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.pg-diagnostic-results.pg-diagnostic-results .relative{position:relative}.pg-diagnostic-results.pg-diagnostic-results .mx-auto{margin-inline:auto}.pg-diagnostic-results.pg-diagnostic-results .my-12{margin-block:calc(var(--g-spacing) * 12)}.pg-diagnostic-results.pg-diagnostic-results .-mt-\[74px\]{margin-top:-74px}.pg-diagnostic-results.pg-diagnostic-results .mt-5{margin-top:calc(var(--g-spacing) * 5)}.pg-diagnostic-results.pg-diagnostic-results .mt-10{margin-top:calc(var(--g-spacing) * 10)}.pg-diagnostic-results.pg-diagnostic-results .mt-16{margin-top:calc(var(--g-spacing) * 16)}.pg-diagnostic-results.pg-diagnostic-results .mt-\[10px\]{margin-top:10px}.pg-diagnostic-results.pg-diagnostic-results .mb-12{margin-bottom:calc(var(--g-spacing) * 12)}.pg-diagnostic-results.pg-diagnostic-results .line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.pg-diagnostic-results.pg-diagnostic-results .scrollbar-none{scrollbar-width:none;-ms-overflow-style:none}.pg-diagnostic-results.pg-diagnostic-results .scrollbar-none::-webkit-scrollbar{display:none}.pg-diagnostic-results.pg-diagnostic-results .block{display:block}.pg-diagnostic-results.pg-diagnostic-results .flex{display:flex}.pg-diagnostic-results.pg-diagnostic-results .grid{display:grid}.pg-diagnostic-results.pg-diagnostic-results .hidden{display:none}.pg-diagnostic-results.pg-diagnostic-results .h-5{height:calc(var(--g-spacing) * 5)}.pg-diagnostic-results.pg-diagnostic-results .h-\[22px\]{height:22px}.pg-diagnostic-results.pg-diagnostic-results .h-\[50px\]{height:50px}.pg-diagnostic-results.pg-diagnostic-results .h-\[394px\]{height:394px}.pg-diagnostic-results.pg-diagnostic-results .h-auto{height:auto}.pg-diagnostic-results.pg-diagnostic-results .h-full{height:100%}.pg-diagnostic-results.pg-diagnostic-results .h-px{height:1px}.pg-diagnostic-results.pg-diagnostic-results .min-h-\[2lh\]{min-height:2lh}.pg-diagnostic-results.pg-diagnostic-results .w-\[300px\]{width:300px}.pg-diagnostic-results.pg-diagnostic-results .w-auto{width:auto}.pg-diagnostic-results.pg-diagnostic-results .w-full{width:100%}.pg-diagnostic-results.pg-diagnostic-results .w-px{width:1px}.pg-diagnostic-results.pg-diagnostic-results .max-w-\[590px\]{max-width:590px}.pg-diagnostic-results.pg-diagnostic-results .max-w-section{max-width:var(--g-container-section)}.pg-diagnostic-results.pg-diagnostic-results .min-w-0{min-width:calc(var(--g-spacing) * 0)}.pg-diagnostic-results.pg-diagnostic-results .auto-cols-max{grid-auto-columns:max-content}.pg-diagnostic-results.pg-diagnostic-results .grid-flow-col{grid-auto-flow:column}.pg-diagnostic-results.pg-diagnostic-results .flex-col{flex-direction:column}.pg-diagnostic-results.pg-diagnostic-results .items-center{align-items:center}.pg-diagnostic-results.pg-diagnostic-results .items-start{align-items:flex-start}.pg-diagnostic-results.pg-diagnostic-results .justify-center{justify-content:center}.pg-diagnostic-results.pg-diagnostic-results .gap-3{gap:calc(var(--g-spacing) * 3)}.pg-diagnostic-results.pg-diagnostic-results .gap-10{gap:calc(var(--g-spacing) * 10)}.pg-diagnostic-results.pg-diagnostic-results .gap-12{gap:calc(var(--g-spacing) * 12)}.pg-diagnostic-results.pg-diagnostic-results .gap-20{gap:calc(var(--g-spacing) * 20)}.pg-diagnostic-results.pg-diagnostic-results :where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--g-spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--g-spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}.pg-diagnostic-results.pg-diagnostic-results .gap-x-\[21px\]{column-gap:21px}.pg-diagnostic-results.pg-diagnostic-results .gap-y-10{row-gap:calc(var(--g-spacing) * 10)}.pg-diagnostic-results.pg-diagnostic-results .truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.pg-diagnostic-results.pg-diagnostic-results .overflow-hidden{overflow:hidden}.pg-diagnostic-results.pg-diagnostic-results .overflow-x-auto{overflow-x:auto}.pg-diagnostic-results.pg-diagnostic-results .rounded-\[12px\]{border-radius:12px}.pg-diagnostic-results.pg-diagnostic-results .rounded-md{border-radius:var(--g-radius-md)}.pg-diagnostic-results.pg-diagnostic-results .border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.pg-diagnostic-results.pg-diagnostic-results .border-border{border-color:var(--g-border)}.pg-diagnostic-results.pg-diagnostic-results .bg-background{background-color:var(--g-bg)}.pg-diagnostic-results.pg-diagnostic-results .bg-foreground\/10{background-color:var(--g-fg)}@supports (color:color-mix(in lab, red, red)){.pg-diagnostic-results.pg-diagnostic-results .bg-foreground\/10{background-color:color-mix(in oklab, var(--g-fg) 10%, transparent)}}.pg-diagnostic-results.pg-diagnostic-results .bg-foreground\/15{background-color:var(--g-fg)}@supports (color:color-mix(in lab, red, red)){.pg-diagnostic-results.pg-diagnostic-results .bg-foreground\/15{background-color:color-mix(in oklab, var(--g-fg) 15%, transparent)}}.pg-diagnostic-results.pg-diagnostic-results .mask-\[linear-gradient\(to_right\,black_85\%\,transparent_100\%\)\]{-webkit-mask-image:linear-gradient(90deg,#000 85%,#0000 100%);mask-image:linear-gradient(90deg,#000 85%,#0000 100%)}.pg-diagnostic-results.pg-diagnostic-results .object-cover{object-fit:cover}.pg-diagnostic-results.pg-diagnostic-results .px-3{padding-inline:calc(var(--g-spacing) * 3)}.pg-diagnostic-results.pg-diagnostic-results .px-5{padding-inline:calc(var(--g-spacing) * 5)}.pg-diagnostic-results.pg-diagnostic-results .py-12{padding-block:calc(var(--g-spacing) * 12)}.pg-diagnostic-results.pg-diagnostic-results .pt-12{padding-top:calc(var(--g-spacing) * 12)}.pg-diagnostic-results.pg-diagnostic-results .pt-14{padding-top:calc(var(--g-spacing) * 14)}.pg-diagnostic-results.pg-diagnostic-results .pt-\[74px\]{padding-top:74px}.pg-diagnostic-results.pg-diagnostic-results .pb-12{padding-bottom:calc(var(--g-spacing) * 12)}.pg-diagnostic-results.pg-diagnostic-results .pl-5{padding-left:calc(var(--g-spacing) * 5)}.pg-diagnostic-results.pg-diagnostic-results .font-brand-display{font-family:var(--g-font-brand-display)}.pg-diagnostic-results.pg-diagnostic-results .font-display{font-family:var(--g-font-display)}.pg-diagnostic-results.pg-diagnostic-results .font-geist{font-family:var(--g-font-geist)}.pg-diagnostic-results.pg-diagnostic-results .text-2xl{font-size:var(--g-text-2xl);line-height:var(--tw-leading,var(--g-text-2xl--line-height))}.pg-diagnostic-results.pg-diagnostic-results .text-product-hero{font-size:var(--g-text-product-hero);line-height:var(--tw-leading,var(--g-text-product-hero--line-height))}.pg-diagnostic-results.pg-diagnostic-results .text-sm{font-size:var(--g-text-sm);line-height:var(--tw-leading,var(--g-text-sm--line-height))}.pg-diagnostic-results.pg-diagnostic-results .leading-none{--tw-leading:1;line-height:1}.pg-diagnostic-results.pg-diagnostic-results .leading-normal{--tw-leading:var(--g-leading-normal);line-height:var(--g-leading-normal)}.pg-diagnostic-results.pg-diagnostic-results .leading-snug{--tw-leading:var(--g-leading-snug);line-height:var(--g-leading-snug)}.pg-diagnostic-results.pg-diagnostic-results .font-medium{--tw-font-weight:var(--g-font-weight-medium);font-weight:var(--g-font-weight-medium)}.pg-diagnostic-results.pg-diagnostic-results .font-normal{--tw-font-weight:var(--g-font-weight-normal);font-weight:var(--g-font-weight-normal)}.pg-diagnostic-results.pg-diagnostic-results .tracking-display{--tw-tracking:var(--g-tracking-display);letter-spacing:var(--g-tracking-display)}.pg-diagnostic-results.pg-diagnostic-results .text-black{color:var(--g-color-black)}.pg-diagnostic-results.pg-diagnostic-results .text-foreground{color:var(--g-fg)}.pg-diagnostic-results.pg-diagnostic-results .text-foreground\/50{color:var(--g-fg)}@supports (color:color-mix(in lab, red, red)){.pg-diagnostic-results.pg-diagnostic-results .text-foreground\/50{color:color-mix(in oklab, var(--g-fg) 50%, transparent)}}.pg-diagnostic-results.pg-diagnostic-results .text-foreground\/55{color:var(--g-fg)}@supports (color:color-mix(in lab, red, red)){.pg-diagnostic-results.pg-diagnostic-results .text-foreground\/55{color:color-mix(in oklab, var(--g-fg) 55%, transparent)}}.pg-diagnostic-results.pg-diagnostic-results .transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--g-default-transition-timing-function));transition-duration:var(--tw-duration,var(--g-default-transition-duration))}.pg-diagnostic-results.pg-diagnostic-results .\[-webkit-mask-image\:linear-gradient\(to_right\,black_85\%\,transparent_100\%\)\]{-webkit-mask-image:linear-gradient(90deg,#000 85%,#0000 100%)}@media not all and (min-width:810px){.pg-diagnostic-results.pg-diagnostic-results .max-\[810px\]\:flex-col{flex-direction:column}}@media (min-width:810px){.pg-diagnostic-results.pg-diagnostic-results .min-\[810px\]\:mt-\[100px\]{margin-top:100px}.pg-diagnostic-results.pg-diagnostic-results .min-\[810px\]\:line-clamp-none{-webkit-line-clamp:unset;-webkit-box-orient:horizontal;display:block;overflow:visible}.pg-diagnostic-results.pg-diagnostic-results .min-\[810px\]\:flex-row{flex-direction:row}.pg-diagnostic-results.pg-diagnostic-results .min-\[810px\]\:items-start{align-items:flex-start}.pg-diagnostic-results.pg-diagnostic-results .min-\[810px\]\:justify-between{justify-content:space-between}.pg-diagnostic-results.pg-diagnostic-results .min-\[810px\]\:gap-x-10{column-gap:calc(var(--g-spacing) * 10)}.pg-diagnostic-results.pg-diagnostic-results .min-\[810px\]\:overflow-visible{overflow:visible}.pg-diagnostic-results.pg-diagnostic-results .min-\[810px\]\:mask-none{-webkit-mask-image:none;mask-image:none}.pg-diagnostic-results.pg-diagnostic-results .min-\[810px\]\:px-11{padding-inline:calc(var(--g-spacing) * 11)}.pg-diagnostic-results.pg-diagnostic-results .min-\[810px\]\:\!pr-0{padding-right:calc(var(--g-spacing) * 0)!important}.pg-diagnostic-results.pg-diagnostic-results .min-\[810px\]\:pl-2{padding-left:calc(var(--g-spacing) * 2)}.pg-diagnostic-results.pg-diagnostic-results .min-\[810px\]\:\[-webkit-mask-image\:none\]{-webkit-mask-image:none}}@media (min-width:1680px){.pg-diagnostic-results.pg-diagnostic-results .min-\[1680px\]\:px-5{padding-inline:calc(var(--g-spacing) * 5)}}@media (min-width:48rem){.pg-diagnostic-results.pg-diagnostic-results .md\:mx-auto{margin-inline:auto}.pg-diagnostic-results.pg-diagnostic-results .md\:mt-20{margin-top:calc(var(--g-spacing) * 20)}.pg-diagnostic-results.pg-diagnostic-results .md\:aspect-\[1325\/750\]{aspect-ratio:1325/750}.pg-diagnostic-results.pg-diagnostic-results .md\:h-auto{height:auto}.pg-diagnostic-results.pg-diagnostic-results .md\:justify-center{justify-content:center}.pg-diagnostic-results.pg-diagnostic-results .md\:pt-20{padding-top:calc(var(--g-spacing) * 20)}.pg-diagnostic-results.pg-diagnostic-results .md\:text-center{text-align:center}}@media (min-width:64rem){.pg-diagnostic-results.pg-diagnostic-results .lg\:sticky{position:sticky}.pg-diagnostic-results.pg-diagnostic-results .lg\:top-20{top:calc(var(--g-spacing) * 20)}.pg-diagnostic-results.pg-diagnostic-results .lg\:mt-\[100px\]{margin-top:100px}.pg-diagnostic-results.pg-diagnostic-results .lg\:block{display:block}.pg-diagnostic-results.pg-diagnostic-results .lg\:flex{display:flex}.pg-diagnostic-results.pg-diagnostic-results .lg\:hidden{display:none}.pg-diagnostic-results.pg-diagnostic-results .lg\:aspect-auto{aspect-ratio:auto}.pg-diagnostic-results.pg-diagnostic-results .lg\:h-\[498px\]{height:498px}.pg-diagnostic-results.pg-diagnostic-results .lg\:w-\[240px\]{width:240px}.pg-diagnostic-results.pg-diagnostic-results .lg\:min-w-0{min-width:calc(var(--g-spacing) * 0)}.pg-diagnostic-results.pg-diagnostic-results .lg\:flex-1{flex:1}.pg-diagnostic-results.pg-diagnostic-results .lg\:shrink-0{flex-shrink:0}.pg-diagnostic-results.pg-diagnostic-results .lg\:flex-col{flex-direction:column}.pg-diagnostic-results.pg-diagnostic-results .lg\:flex-row{flex-direction:row}.pg-diagnostic-results.pg-diagnostic-results .lg\:items-start{align-items:flex-start}.pg-diagnostic-results.pg-diagnostic-results .lg\:justify-center{justify-content:center}.pg-diagnostic-results.pg-diagnostic-results .lg\:gap-25{gap:calc(var(--g-spacing) * 25)}.pg-diagnostic-results.pg-diagnostic-results .lg\:pt-20{padding-top:calc(var(--g-spacing) * 20)}.pg-diagnostic-results.pg-diagnostic-results .lg\:pt-\[56px\]{padding-top:56px}.pg-diagnostic-results.pg-diagnostic-results .lg\:pt-\[95px\]{padding-top:95px}.pg-diagnostic-results.pg-diagnostic-results .lg\:pt-\[310\]{padding-top:310px}.pg-diagnostic-results.pg-diagnostic-results .lg\:pb-15{padding-bottom:calc(var(--g-spacing) * 15)}.pg-diagnostic-results.pg-diagnostic-results .lg\:pb-\[120px\]{padding-bottom:120px}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}.pg-diagnostic-results{--g-bg:#fff;--g-fg:#000;--g-border:#0000001a;--g-accent-orange:#ef5a00;--g-ring:#d14e00;--g-selection-bg:#ef5a0038}@supports (color:lab(0% 0 0)){.pg-diagnostic-results{--g-bg:lab(100% 0 0);--g-fg:lab(0% 0 0);--g-border:lab(0% 0 0/.1)}}.pg-diagnostic-results [data-theme=dark]{--g-bg:#0f0d0d;--g-fg:#fff;--g-border:#ffffff14;--g-ring:var(--g-accent-orange);--g-selection-bg:#ef5a0047}@supports (color:lab(0% 0 0)){.pg-diagnostic-results [data-theme=dark]{--g-bg:lab(3.8965% .549272 .354368);--g-fg:lab(100% 0 0);--g-border:lab(100% 0 0/.08)}}.pg-diagnostic-results{height:100%;overflow-x:clip}.pg-diagnostic-results{background:var(--g-color-background);color:var(--g-color-foreground);font-family:var(--g-font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;text-wrap:pretty;overflow:clip visible!important}.pg-diagnostic-results h1, .pg-diagnostic-results h2, .pg-diagnostic-results :is(h1,h2).font-display{font-family:var(--g-font-pixel-line);font-weight:400}.pg-diagnostic-results *, .pg-diagnostic-results, .pg-diagnostic-results :before, .pg-diagnostic-results :after{outline-color:var(--g-focus-ring-color,var(--g-ring))}.pg-diagnostic-results :focus-visible{outline:2px solid var(--g-focus-ring-color,var(--g-ring));outline-offset:2px}.pg-diagnostic-results ::selection{background:var(--g-selection-bg)}@media (prefers-reduced-motion:reduce){.pg-diagnostic-results *, .pg-diagnostic-results, .pg-diagnostic-results :before, .pg-diagnostic-results :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.pg-diagnostic-results .case-study-article{font-family:var(--g-font-geist);color:#666;letter-spacing:-.02em;font-size:16px;line-height:28.8px}.pg-diagnostic-results .case-study-article>:first-child{margin-top:0}.pg-diagnostic-results .case-study-article p, .pg-diagnostic-results .case-study-article ul{margin-top:20px}.pg-diagnostic-results .case-study-article ul{padding-left:1.5rem}.pg-diagnostic-results .case-study-article ul{list-style:outside}.pg-diagnostic-results .case-study-article li{margin-top:8px}.pg-diagnostic-results .case-study-article h2{font-family:var(--g-font-display);letter-spacing:-.04em;color:var(--g-fg);margin-top:72px;margin-bottom:20px;scroll-margin-top:90px;font-size:32px;font-weight:400;line-height:44.8px}.pg-diagnostic-results .case-study-article strong{color:inherit;font-weight:600}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0} /* ===== Gnar skin (build/skin.css) ===== */ /* skin.css — the Gnar skin on giga's chassis. Appended unlayered after giga's scoped CSS by build/css.mjs, so it wins over giga's @layer rules. It changes ONLY what BRAND-DIALECT.md puts on the keep list: font families, weights and tracking, the size ladder, text and ground colours, the accent, buttons and the eyebrow. Layout, spacing, line heights, radii, borders and motion stay giga's. giga's own dark theme ([data-theme=dark] on the wrapper, set by port.mjs) already uses the homepage's ground #0f0d0d and white ink; the variables below pin the rest to the kit. */ /* ---- 1. theme variables → kit tokens */ .pg-diagnostic-results.pg-diagnostic-results [data-theme=dark] { --g-bg: var(--bg); --g-fg: var(--fg); --g-border: var(--line); --g-surface: var(--surface-1); --g-accent-orange: var(--accent); --g-button-bg: var(--accent); --g-button-bg-hover: var(--accent-hover); --g-font-geist-source: var(--font-sans); --g-font-sans-source: var(--font-sans); --g-font-mono-source: var(--font-mono); --g-font-pixel-line-source: var(--font-pixel); --g-font-brand-display-source: var(--font-sans); --g-font-display: var(--font-sans); /* giga sets every heading in its pixel face; Gnar headings are Geist 600 */ --g-tracking-display: var(--display-ls); /* -0.03em, the homepage display tracking */ --g-text-product-hero: clamp(45.24px, 5.5vw, 64px); /* giga clamp(44px,5.5vw,64px) moved onto the ladder: 45.24 @390, 64 @1440 */ --g-text-cta: 39.91px; /* giga 40px @390 → ladder 39.91 (0.09px off the donor) */ color: var(--fg); background-color: var(--bg); } /* The donor wrapper clears giga's own chrome: a 32px announcement bar + a 74px fixed header (106px). The chrome is swapped for the kit's, which has no announcement bar, so the offset is the kit's own clearance token (--nav-clear, 76 desktop / 56 phones). giga's 95px/48px gap from the chrome to the logo row is kept. Checkpoint 3 (DECISIONS D14): the 106px copy of giga's chrome pushed the proof row below the fold at 1300x658. */ .pg-diagnostic-results.pg-diagnostic-results.pg-diagnostic-results > [data-theme=dark] { margin-top: 0; padding-top: var(--nav-clear); } /* ---- 2. type voice: Geist 600 headings, sentence case, the homepage's tracking */ .pg-diagnostic-results.pg-diagnostic-results .font-display { font-family: var(--font-sans); font-weight: 600; } .pg-diagnostic-results.pg-diagnostic-results h1.text-product-hero { letter-spacing: var(--display-ls); color: var(--fg); text-wrap: balance; } /* V15, Evan: "4 lines… it should be like one or two". giga's 590px cap stacked Gnar's 10-word live title 4 high. Wide enough for 2 balanced lines at 64px (the whole title is 1847px on one line); phones step down the 390 ladder to 36px: 4 lines at 360–390 (was 5), 3 at 430 (measured; every phone step from 36 up gives 4+, and 3 needs the 24px subhead size). */ @media (min-width: 810px) { .pg-diagnostic-results.pg-diagnostic-results h1.text-product-hero { max-width: 1040px; } } @media (max-width: 809.98px) { .pg-diagnostic-results.pg-diagnostic-results h1.text-product-hero { font-size: 36px; line-height: 1.1; } } .pg-diagnostic-results.pg-diagnostic-results h1 .k-px { font-size: 1em; letter-spacing: -0.01em; font-weight: 400; } /* one pixel word, as the homepage's "legacy"; 1em keeps it on the ladder */ .pg-diagnostic-results.pg-diagnostic-results .text-cta { letter-spacing: var(--h2-ls); color: var(--fg); } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-program { font-family: var(--font-sans); font-size: var(--h4); font-weight: var(--h4-w); letter-spacing: -0.01em; line-height: 24px; color: var(--fg); } /* article: giga 32px pixel headings → Geist 600 on the card-title ladder (30 @1440, 24 @390); giga's 44.8px line height, margins and scroll margin stay */ .pg-diagnostic-results.pg-diagnostic-results .case-study-article { color: var(--fg-body); letter-spacing: 0; /* body carries no tracking on the homepage (giga -0.02em) */ } .pg-diagnostic-results.pg-diagnostic-results .case-study-article h2, .pg-diagnostic-results.pg-diagnostic-results .case-study-article h3 { font-family: var(--font-sans); font-weight: var(--h3-w); font-size: 24px; letter-spacing: var(--h3-ls); color: var(--fg); line-height: 1.4; /* giga's 44.8px is 1.4 x its 32px; on phones the ladder puts the heading at 24px, so the ratio carries, not the px (44.8 at 24px read loose on two-line headings) */ } @media (min-width: 810px) { .pg-diagnostic-results.pg-diagnostic-results [data-theme=dark] { --g-text-cta: var(--h2); } /* giga 60px @≥810 → the homepage section heading (52 @1440); at 64 the Gnar line wraps to 4 lines in giga's 620px column */ } @media (min-width: 810px) { .pg-diagnostic-results.pg-diagnostic-results .case-study-article h2, .pg-diagnostic-results.pg-diagnostic-results .case-study-article h3 { font-size: 30px; } /* giga's 1.4 ratio carries at every width (rhythm-check, V9: 44.8px at 30px was 1.49) */ } .pg-diagnostic-results.pg-diagnostic-results .case-study-article strong { color: var(--fg); } .pg-diagnostic-results.pg-diagnostic-results .case-study-article a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; transition: color var(--dur) var(--ease-out); } @media (hover: hover) { .pg-diagnostic-results.pg-diagnostic-results .case-study-article a:hover { color: var(--accent); } } .pg-diagnostic-results.pg-diagnostic-results .case-study-article ul li::marker, .pg-diagnostic-results.pg-diagnostic-results .case-study-article ol li::marker { color: var(--fg-caption); } /* ---- 3. text colours: giga's greys → the homepage's whites */ .pg-diagnostic-results.pg-diagnostic-results .text-foreground\/50 { color: var(--fg-caption); } .pg-diagnostic-results.pg-diagnostic-results .text-foreground\/55 { color: var(--fg-body); } .pg-diagnostic-results.pg-diagnostic-results .text-foreground\/60 { color: var(--fg-caption); } .pg-diagnostic-results.pg-diagnostic-results .text-foreground\/80 { color: rgba(255, 255, 255, .82); } /* quote text, BRAND-DIALECT §2 (.82) */ .pg-diagnostic-results.pg-diagnostic-results .text-black { color: var(--fg); } .pg-diagnostic-results.pg-diagnostic-results .text-\[rgb\(150\,150\,150\)\] { color: var(--fg-small); } /* ---- 4. contents rail: giga's white-on-white hover plate reads as a text change only; so does the clone's */ @media (hover: hover) { .pg-diagnostic-results.pg-diagnostic-results nav[aria-label="Table of contents"] a:hover { background-color: transparent; color: var(--fg); } } .pg-diagnostic-results.pg-diagnostic-results nav[aria-label="Table of contents"] a[aria-current="location"] { color: var(--fg); } /* hero stats: giga's columns are auto-cols-max (as wide as their text) and its labels carry line-clamp-2. Gnar's labels are longer, so they take giga's widest label width (187px) and wrap to the two lines giga allows. */ .pg-diagnostic-results.pg-diagnostic-results ul.grid > li > p { max-width: 187px; text-wrap: balance; } /* V15, Evan: no grey lines between the stats. The rule goes transparent so giga's spacing stays. */ .pg-diagnostic-results.pg-diagnostic-results ul.grid > li { border-left-color: transparent; } /* refactoring-ui (V4): the value outranks its label by weight too, not only colour. Geist 500 is on the homepage's weight list; size and line stay giga's. */ .pg-diagnostic-results.pg-diagnostic-results ul.grid > li > p:first-of-type { font-weight: 500; } /* ---- images. The hero is the rebuilt Property Tax-Aide tools (the service itself, as giga's hero is a delivery happening). The screen composite has its own dark margins, so it sits on the plate, anchored left on phones where giga's frame turns portrait. The article photo takes giga's own portrait treatment (its headshot is grayscale-100) so the source's blue duotone doesn't fight the one-accent palette. */ .pg-diagnostic-results.pg-diagnostic-results .case-study-article img { filter: none; } /* the tools composite at giga's h-auto image module: 672x231, sharp at 2x */ /* giga's in-body image frame is 16:9 (its delivery photo is 1696x954); the Gnar photo is 4:3, so it takes giga's frame shape with a cover crop (checkpoint 2, Claude Opus clone judge: "458x257 (wide) in DONOR … 458x343 in CLONE") */ /* a heading that receives focus from the contents rail shows no ring (it isn't a control); the scroll is the cue */ .pg-diagnostic-results.pg-diagnostic-results .case-study-article h2[tabindex="-1"]:focus { outline: none; } /* the phone stats scroller, when focusable: the kit's ring (2px orange, 2px offset) */ .pg-diagnostic-results.pg-diagnostic-results [role="region"][tabindex="0"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; } /* ---- hero image (V13, after Evan's "looks broken"). Variant 'photo': giga's own device, a person in the rounded frame, full-bleed cover, no plate, graded with giga's portrait treatment (grayscale) and set down a touch into the ground. Variant 'screen': one tools screen cropped tight (no margins), cover. */ .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-hero--photo img { object-fit: cover; object-position: 30% 100%; filter: grayscale(1) brightness(.88); } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-hero--screen img { object-fit: cover; object-position: 50% 0%; } /* With the quote shown once (in the card: Pete, Mike and Nick all asked for one copy), the stats are the row's only child. Centred under the centred headline, the hero reads as one column: lockup, headline, proof, tools. (Pinned right, as in V12, it looked like a column had failed to load.) */ @media (min-width: 600px) { .pg-diagnostic-results.pg-diagnostic-results article > div:first-child .overflow-x-auto:only-child { margin-inline: auto; -webkit-mask-image: none; mask-image: none; } } /* the row fits whole from 600, so giga's swipe-hint fade (which dimmed the third stat) goes */ /* from 600 the three stats fit on one row, so they centre under the headline on tablets too (V17) */ /* ---- hero mockup (V13). giga's rounded frame on Gnar's plate; the two rebuilt tools as windows, each labelled in the homepage's mono caps. A window's width never exceeds half its file's width (919/950px), so it stays sharp at 2x. */ .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-hero--mock { /* V15: no box around the windows; they and their shadows carry the image. With the plate gone, giga's fixed 498px frame left ~50px of nothing above the windows and ~140px below, so the frame now hugs them: its height is the second window's top offset + its title bar + its screen (950x678) + borders. Shadows show past the edge. */ --w: min(455px, calc((100vw - 88px) * .45)); /* .45 (was .38): 834 gets 336px windows, not 281 (smaller than 768's 380); 1300+ unchanged at 455 */ background-color: transparent; overflow: visible; height: calc(78px + var(--w) * .7137) !important; aspect-ratio: auto !important; } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-mock { position: absolute; inset: 0; } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-window { position: absolute; margin: 0; width: var(--w); border-radius: 10px; overflow: hidden; background-color: var(--surface-raised); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 24px 60px rgba(0, 0, 0, .45); } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-window--a { left: calc(50% - var(--w) * .925); top: 0; } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-window--b { left: calc(50% - var(--w) * .075); top: 48px; } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-window-bar { display: flex; align-items: center; gap: 12px; height: 28px; padding: 0 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-small); border-bottom: 1px solid var(--line); } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-window-dots { display: inline-flex; gap: 5px; } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-window img { display: block; width: 100%; height: auto; } @media (max-width: 809.98px) { .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-hero--mock { --w: min(380px, calc((100vw - 40px) * .72)); height: calc(30px + var(--w) * 1.164) !important; } /* 380 cap: tablets get windows their size (768: 380px, still under half the 919px file, so sharp at 2x); phones unchanged (390: 252) */ .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-window--a { left: calc(50% - var(--w) * .6); top: 0; } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-window--b { left: calc(50% - var(--w) * .4); top: calc(var(--w) * .45); } } /* the second window rises a beat after the first (giga's entrance curve, +120ms) */ .pg-diagnostic-results.pg-diagnostic-results.pg-diagnostic-results-armed .pg-diagnostic-results-window--b { opacity: 0; transform: translateY(12px); } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-in .pg-diagnostic-results-window--b { opacity: 1; transform: none; transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) 120ms, transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 120ms; } @media (prefers-reduced-motion: reduce) { .pg-diagnostic-results.pg-diagnostic-results.pg-diagnostic-results-armed .pg-diagnostic-results-window--b { transform: none; } } /* ---- 5. hero stat icons: giga's two-tone orange marks, in Gnar orange */ .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-stat-icon { display: block; color: var(--accent); } /* the rail's in-box offset is replaced by an outside one (page.js alignRail): see the note there */ @media (min-width: 1024px) { .pg-diagnostic-results.pg-diagnostic-results aside.lg\:sticky { padding-top: 0; } } /* the three icons are 14, 17 and 14.5px tall, so giga's values start 3px apart (its own 610/613/611). One 17px box, icons on its floor, puts all three values on one line. */ .pg-diagnostic-results.pg-diagnostic-results .overflow-x-auto li > div[aria-hidden="true"]:first-child { height: 17px; display: flex; align-items: flex-end; } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-client-logo { height: 22px; width: auto; } /* ---- 6. share row: giga's light chips → a dark chip on the ground */ /* giga's icon links are 18px; the touch gate needs 40px. The link becomes a 40px transparent hit area pulled back by 11px on every side (no layout change), and the visible 18px chip moves onto the icon itself. */ .pg-diagnostic-results.pg-diagnostic-results a[aria-label^="Share on"] { background-color: transparent; color: var(--fg-body); min-width: 40px; min-height: 40px; margin: -11px; padding: 0; } .pg-diagnostic-results.pg-diagnostic-results a[aria-label^="Share on"] svg { display: block; box-sizing: content-box; background-color: var(--surface-raised); border-radius: 4px; padding: 1px; } /* content-box: the kit's global border-box would let the padding eat the icon (the X drew at 3px) */ .pg-diagnostic-results.pg-diagnostic-results a[aria-label="Share on X"] svg { padding: 4px; } /* ---- 7. the quote card: giga's warm-tint plate (rgba(249,190,170,.1) on white) → Gnar's card plate and line, giga's shape (12px radius, 32px padding, 1px border) kept */ .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-quote-card { background-color: var(--surface-1); border-color: transparent; } /* V15, Evan: "the other grey section lines need to go… its ai slop". The two article hairlines go transparent (their spacing stays giga's); the card keeps its fill and loses its outline and inner bar. The AARP-wordmark square that stood in for a headshot goes too (an expert UX call: a logo posing as a person); the name lines up with the quote. */ .pg-diagnostic-results.pg-diagnostic-results .case-study-article .h-px { background-color: transparent; } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-quote-card > div > [aria-hidden="true"] { display: none; } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-quote-card figcaption { padding-left: 0; } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-avatar { display: none; } /* giga centres the avatar against a 2-line attribution, which reads as "beside the name". Krystal Downie's role wraps to 3 lines on phones, so centring floated the avatar mid-block with the name above it (checkpoint 2, Codex clone judge). Top-aligning keeps giga's avatar-beside-name relation at any copy length (at 1440 it moves the avatar about 1px). */ .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-quote-card figcaption { align-items: flex-start; } /* ---- 8. CTA band: the kit's (the homepage's closing band, V16); it brings its own type and colour */ .pg-diagnostic-results.pg-diagnostic-results .k-cta .cta-h2 { font-weight: var(--h2-w); } /* the kit token (600, measured on super-site #cta); giga's base h2 reset had it at 400 */ /* phones: the kit insets the band copy 40px (wrap 20 + copy 20), a 310px column that stacked this page's 47-character heading 4 lines at ~12 characters (legible L2). The rest of this page sits on a 20px edge, so the band does too. */ @media (max-width: 767.98px) { .pg-diagnostic-results.pg-diagnostic-results .k-cta-copy { padding-inline: 0; } } /* ---- 9. hero entrance (page.js): hidden only once JS has armed it, so the page is visible without JS */ .pg-diagnostic-results.pg-diagnostic-results-armed [data-pg-diagnostic-results-enter] { opacity: 0; transform: translateY(10px); } .pg-diagnostic-results.pg-diagnostic-results [data-pg-diagnostic-results-enter].pg-diagnostic-results-in { opacity: 1; transform: none; transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { /* gentler, not zero: keep giga's 600ms fade, drop the rise */ .pg-diagnostic-results.pg-diagnostic-results-armed [data-pg-diagnostic-results-enter] { transform: none; } .pg-diagnostic-results [data-pg-diagnostic-results-enter].pg-diagnostic-results-in { transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1); } } /* V15 (expert UX): on phones the inline Contents list filled a full screen before the summary of a four-section article. The desktop rail stays. */ @media (max-width: 1023.98px) { .pg-diagnostic-results.pg-diagnostic-results aside.lg\:hidden { display: none; } } /* V17 (final QA): giga mirrors its 240px Contents rail with an empty 240px spacer, each with a 100px gap, so the article is the window minus 680px: 672 at 1440, 532 at 1300, but 256 at 1024 (headings 4 lines, 3-word lines). From 1024 to 1279 the rail and its spacer step aside and the article takes giga's own 672px measure, centred (as on tablets). From 1280 the rail returns (article 512+). */ @media (min-width: 1024px) and (max-width: 1279.98px) { .pg-diagnostic-results.pg-diagnostic-results aside.lg\:sticky, .pg-diagnostic-results.pg-diagnostic-results div[aria-hidden="true"].lg\:block.lg\:shrink-0 { display: none; } .pg-diagnostic-results.pg-diagnostic-results .case-study-article { max-width: 672px; margin-inline: auto; } .pg-diagnostic-results.pg-diagnostic-results .case-study-article { width: 100%; } } /* V17 tablets (768–1023): giga runs the article full width (728px at 768, ~100 characters a line). It takes giga's own 672px desktop measure, centred, as at 1024–1279. */ @media (min-width: 768px) and (max-width: 1023.98px) { .pg-diagnostic-results.pg-diagnostic-results .case-study-article { max-width: 672px; width: 100%; margin-inline: auto; } } /* V17 at 320 (a phone at 200% zoom): the window name stays on one line (the decorative dots step aside under 400px), and the client name never breaks at its hyphen ("Property Tax-" / "Aide"). */ .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-window-bar { white-space: nowrap; overflow: hidden; } @media (max-width: 399.98px) { .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-window-dots { display: none; } } .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-program { white-space: nowrap; } @media (max-width: 359.98px) { .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-program { font-size: 20px; } } /* ===== page extra: src/css/fixes.css ===== */ /* Hero crop. The live image is five phones in a row (2111x784 after cropping to its opaque box). The template's 30% 100% anchor (made for a person photo) put the second phone whole and cut the third through its tutorial text at 390. Centring it frames the middle phone whole on phones with slivers of its neighbours, keeps phones 2 to 4 whole at 768 to 1024, and changes nothing visible at 1440, where the frame is the image's own shape. The grayscale treatment stays. Same kind of override as pages/gsc-enterprises and pages/mobile-engagement-app. */ .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-hero--photo img { object-position: 50% 50%; } /* The study's one in-text link ("Aspect Reporter mobile app") sits on one line at 390, so its box is 21px tall, under the 24px WCAG 2.5.8 target. Vertical padding on an inline link grows its hit box without moving the line. Same fix as pages/gsc-enterprises, pages/candlebuilders and pages/order-ahead. */ .pg-diagnostic-results p a { padding-block: 2px; } /* Round 3. In Chrome the Challenge's "clinics—a process" broke before the em dash at 1440, 1024, 810 and 768, so a line began with "—a". Keep "clinics—a" together (the words are unchanged; the paragraph carries one span). */ .pg-diagnostic-results .pg-diagnostic-results-nowrap { white-space: nowrap; } /* Round 3. "real-time." sat alone on the last line of a Results paragraph at 390 in Chrome; text-wrap: pretty did not move it (Chrome treats "real-time." as one word), so that paragraph also keeps "near real-time." together with the nowrap span above. text-wrap: pretty stays for the rest of the column: the same rule the approved service template uses on its body copy (pages/service/src/css/v2.css), moving line breaks only. */ .pg-diagnostic-results .case-study-article p, .pg-diagnostic-results .case-study-article li { text-wrap: pretty; } /* Round 3. The 50% crop left thin strips of the outer phones at the frame's edges, reading as stray lines: 5-40px of phones 1 and 5 from 1024 to 1093px, and 13-40px of phones 2 and 4 up to 413px. Solved from the frame size measured at every width 320-1600 and the phone bounds in the hero file (0-327, 436-763, 872-1199, 1308-1674, 1783-2110 of 2111): each anchor below is the one nearest centre that leaves no cut phone under 40px in its band. Phones 2-4 stay whole with phone 5 peeking 54-81px at 1024-1093; on phones the middle phone stays whole with phone 4 peeking 60-100px on the right. */ @media (min-width: 1024px) and (max-width: 1093px) { .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-hero--photo img { object-position: 62% 50%; } } @media (max-width: 413px) { .pg-diagnostic-results.pg-diagnostic-results .pg-diagnostic-results-hero--photo img { object-position: 56% 50%; } } /* Night pass. The template clamps hero stat labels to 2 lines below 810px; the second label (Gnar's live words, 63 characters) needs 3 there, so it was cut at "multiple…". On phones the labels show in full, as the template already does from 810px (same rule as pages/gsc-enterprises/src/css/stats-fit.css). Balanced wrapping keeps "clinics" from sitting alone on the last line. */ @media (max-width: 809px) { .pg-diagnostic-results.pg-diagnostic-results ul.grid > li > p:last-of-type { display: block; overflow: visible; -webkit-box-orient: horizontal; -webkit-line-clamp: none; line-clamp: none; } } .pg-diagnostic-results.pg-diagnostic-results ul.grid > li > p:last-of-type { text-wrap: balance; } /* Below 768px the kit's fixed header grows with the screen (73px at 390, 143px at 767) while the logo line stays at 105px, so the header covered the SystemOne logo by 7 to 38px from 600 to 767px (measured on V4). Same fix as abuse-prevention, gridly and device-security: add only the missing space, zero at 390 and below; at 768 the header drops back to 74px. */ @media (max-width: 767px) { .pg-diagnostic-results article > div:first-child { margin-top: max(0px, calc(18.4vw - 72px)); } }