/* 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-salsify *, .pg-salsify, .pg-salsify :before, .pg-salsify :after, .pg-salsify ::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-salsify, .pg-salsify :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-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-salsify *, .pg-salsify, .pg-salsify :after, .pg-salsify :before, .pg-salsify ::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}.pg-salsify ::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}.pg-salsify, .pg-salsify :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-salsify h1, .pg-salsify h2{font-size:inherit;font-weight:inherit}.pg-salsify a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}.pg-salsify strong{font-weight:bolder}.pg-salsify :-moz-focusring{outline:auto}.pg-salsify ul{list-style:none}.pg-salsify img, .pg-salsify svg, .pg-salsify canvas{vertical-align:middle;display:block}.pg-salsify img{max-width:100%;height:auto}.pg-salsify button, .pg-salsify 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-salsify ::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-salsify ::file-selector-button{margin-inline-end:4px}.pg-salsify ::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){.pg-salsify ::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){.pg-salsify ::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}.pg-salsify ::-webkit-search-decoration{-webkit-appearance:none}.pg-salsify ::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}.pg-salsify ::-webkit-datetime-edit{display:inline-flex}.pg-salsify ::-webkit-datetime-edit-fields-wrapper{padding:0}.pg-salsify ::-webkit-datetime-edit{padding-block:0}.pg-salsify ::-webkit-datetime-edit-year-field{padding-block:0}.pg-salsify ::-webkit-datetime-edit-month-field{padding-block:0}.pg-salsify ::-webkit-datetime-edit-day-field{padding-block:0}.pg-salsify ::-webkit-datetime-edit-hour-field{padding-block:0}.pg-salsify ::-webkit-datetime-edit-minute-field{padding-block:0}.pg-salsify ::-webkit-datetime-edit-second-field{padding-block:0}.pg-salsify ::-webkit-datetime-edit-millisecond-field{padding-block:0}.pg-salsify ::-webkit-datetime-edit-meridiem-field{padding-block:0}.pg-salsify ::-webkit-calendar-picker-indicator{line-height:1}.pg-salsify :-moz-ui-invalid{box-shadow:none}.pg-salsify button{appearance:button}.pg-salsify ::file-selector-button{appearance:button}.pg-salsify ::-webkit-inner-spin-button{height:auto}.pg-salsify ::-webkit-outer-spin-button{height:auto}}@layer components;.pg-salsify.pg-salsify .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-salsify.pg-salsify .relative{position:relative}.pg-salsify.pg-salsify .mx-auto{margin-inline:auto}.pg-salsify.pg-salsify .my-12{margin-block:calc(var(--g-spacing) * 12)}.pg-salsify.pg-salsify .-mt-\[74px\]{margin-top:-74px}.pg-salsify.pg-salsify .mt-5{margin-top:calc(var(--g-spacing) * 5)}.pg-salsify.pg-salsify .mt-10{margin-top:calc(var(--g-spacing) * 10)}.pg-salsify.pg-salsify .mt-16{margin-top:calc(var(--g-spacing) * 16)}.pg-salsify.pg-salsify .mb-12{margin-bottom:calc(var(--g-spacing) * 12)}.pg-salsify.pg-salsify .block{display:block}.pg-salsify.pg-salsify .flex{display:flex}.pg-salsify.pg-salsify .hidden{display:none}.pg-salsify.pg-salsify .h-5{height:calc(var(--g-spacing) * 5)}.pg-salsify.pg-salsify .h-\[22px\]{height:22px}.pg-salsify.pg-salsify .h-\[50px\]{height:50px}.pg-salsify.pg-salsify .h-\[394px\]{height:394px}.pg-salsify.pg-salsify .h-auto{height:auto}.pg-salsify.pg-salsify .h-full{height:100%}.pg-salsify.pg-salsify .h-px{height:1px}.pg-salsify.pg-salsify .w-\[300px\]{width:300px}.pg-salsify.pg-salsify .w-auto{width:auto}.pg-salsify.pg-salsify .w-full{width:100%}.pg-salsify.pg-salsify .w-px{width:1px}.pg-salsify.pg-salsify .max-w-\[590px\]{max-width:590px}.pg-salsify.pg-salsify .max-w-section{max-width:var(--g-container-section)}.pg-salsify.pg-salsify .flex-col{flex-direction:column}.pg-salsify.pg-salsify .items-center{align-items:center}.pg-salsify.pg-salsify .items-start{align-items:flex-start}.pg-salsify.pg-salsify .justify-center{justify-content:center}.pg-salsify.pg-salsify .gap-3{gap:calc(var(--g-spacing) * 3)}.pg-salsify.pg-salsify .gap-10{gap:calc(var(--g-spacing) * 10)}.pg-salsify.pg-salsify .gap-12{gap:calc(var(--g-spacing) * 12)}.pg-salsify.pg-salsify .gap-20{gap:calc(var(--g-spacing) * 20)}.pg-salsify.pg-salsify :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-salsify.pg-salsify .gap-y-10{row-gap:calc(var(--g-spacing) * 10)}.pg-salsify.pg-salsify .truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.pg-salsify.pg-salsify .overflow-hidden{overflow:hidden}.pg-salsify.pg-salsify .rounded-\[12px\]{border-radius:12px}.pg-salsify.pg-salsify .rounded-md{border-radius:var(--g-radius-md)}.pg-salsify.pg-salsify .bg-background{background-color:var(--g-bg)}.pg-salsify.pg-salsify .bg-foreground\/10{background-color:var(--g-fg)}@supports (color:color-mix(in lab, red, red)){.pg-salsify.pg-salsify .bg-foreground\/10{background-color:color-mix(in oklab, var(--g-fg) 10%, transparent)}}.pg-salsify.pg-salsify .bg-foreground\/15{background-color:var(--g-fg)}@supports (color:color-mix(in lab, red, red)){.pg-salsify.pg-salsify .bg-foreground\/15{background-color:color-mix(in oklab, var(--g-fg) 15%, transparent)}}.pg-salsify.pg-salsify .object-cover{object-fit:cover}.pg-salsify.pg-salsify .px-3{padding-inline:calc(var(--g-spacing) * 3)}.pg-salsify.pg-salsify .px-5{padding-inline:calc(var(--g-spacing) * 5)}.pg-salsify.pg-salsify .py-12{padding-block:calc(var(--g-spacing) * 12)}.pg-salsify.pg-salsify .pt-12{padding-top:calc(var(--g-spacing) * 12)}.pg-salsify.pg-salsify .pt-14{padding-top:calc(var(--g-spacing) * 14)}.pg-salsify.pg-salsify .pt-\[74px\]{padding-top:74px}.pg-salsify.pg-salsify .pb-12{padding-bottom:calc(var(--g-spacing) * 12)}.pg-salsify.pg-salsify .font-brand-display{font-family:var(--g-font-brand-display)}.pg-salsify.pg-salsify .font-display{font-family:var(--g-font-display)}.pg-salsify.pg-salsify .font-geist{font-family:var(--g-font-geist)}.pg-salsify.pg-salsify .text-2xl{font-size:var(--g-text-2xl);line-height:var(--tw-leading,var(--g-text-2xl--line-height))}.pg-salsify.pg-salsify .text-product-hero{font-size:var(--g-text-product-hero);line-height:var(--tw-leading,var(--g-text-product-hero--line-height))}.pg-salsify.pg-salsify .text-sm{font-size:var(--g-text-sm);line-height:var(--tw-leading,var(--g-text-sm--line-height))}.pg-salsify.pg-salsify .leading-none{--tw-leading:1;line-height:1}.pg-salsify.pg-salsify .leading-snug{--tw-leading:var(--g-leading-snug);line-height:var(--g-leading-snug)}.pg-salsify.pg-salsify .font-medium{--tw-font-weight:var(--g-font-weight-medium);font-weight:var(--g-font-weight-medium)}.pg-salsify.pg-salsify .font-normal{--tw-font-weight:var(--g-font-weight-normal);font-weight:var(--g-font-weight-normal)}.pg-salsify.pg-salsify .tracking-display{--tw-tracking:var(--g-tracking-display);letter-spacing:var(--g-tracking-display)}.pg-salsify.pg-salsify .text-black{color:var(--g-color-black)}.pg-salsify.pg-salsify .text-foreground{color:var(--g-fg)}.pg-salsify.pg-salsify .text-foreground\/55{color:var(--g-fg)}@supports (color:color-mix(in lab, red, red)){.pg-salsify.pg-salsify .text-foreground\/55{color:color-mix(in oklab, var(--g-fg) 55%, transparent)}}.pg-salsify.pg-salsify .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))}@media not all and (min-width:810px){.pg-salsify.pg-salsify .max-\[810px\]\:flex-col{flex-direction:column}}@media (min-width:810px){.pg-salsify.pg-salsify .min-\[810px\]\:mt-\[100px\]{margin-top:100px}.pg-salsify.pg-salsify .min-\[810px\]\:flex-row{flex-direction:row}.pg-salsify.pg-salsify .min-\[810px\]\:items-start{align-items:flex-start}.pg-salsify.pg-salsify .min-\[810px\]\:justify-between{justify-content:space-between}.pg-salsify.pg-salsify .min-\[810px\]\:gap-x-10{column-gap:calc(var(--g-spacing) * 10)}.pg-salsify.pg-salsify .min-\[810px\]\:px-11{padding-inline:calc(var(--g-spacing) * 11)}.pg-salsify.pg-salsify .min-\[810px\]\:pl-2{padding-left:calc(var(--g-spacing) * 2)}}@media (min-width:1680px){.pg-salsify.pg-salsify .min-\[1680px\]\:px-5{padding-inline:calc(var(--g-spacing) * 5)}}@media (min-width:48rem){.pg-salsify.pg-salsify .md\:mx-auto{margin-inline:auto}.pg-salsify.pg-salsify .md\:mt-20{margin-top:calc(var(--g-spacing) * 20)}.pg-salsify.pg-salsify .md\:aspect-\[1325\/750\]{aspect-ratio:1325/750}.pg-salsify.pg-salsify .md\:h-auto{height:auto}.pg-salsify.pg-salsify .md\:justify-center{justify-content:center}.pg-salsify.pg-salsify .md\:pt-20{padding-top:calc(var(--g-spacing) * 20)}.pg-salsify.pg-salsify .md\:text-center{text-align:center}}@media (min-width:64rem){.pg-salsify.pg-salsify .lg\:sticky{position:sticky}.pg-salsify.pg-salsify .lg\:top-20{top:calc(var(--g-spacing) * 20)}.pg-salsify.pg-salsify .lg\:mt-\[100px\]{margin-top:100px}.pg-salsify.pg-salsify .lg\:block{display:block}.pg-salsify.pg-salsify .lg\:flex{display:flex}.pg-salsify.pg-salsify .lg\:hidden{display:none}.pg-salsify.pg-salsify .lg\:aspect-auto{aspect-ratio:auto}.pg-salsify.pg-salsify .lg\:h-\[498px\]{height:498px}.pg-salsify.pg-salsify .lg\:w-\[240px\]{width:240px}.pg-salsify.pg-salsify .lg\:min-w-0{min-width:calc(var(--g-spacing) * 0)}.pg-salsify.pg-salsify .lg\:flex-1{flex:1}.pg-salsify.pg-salsify .lg\:shrink-0{flex-shrink:0}.pg-salsify.pg-salsify .lg\:flex-col{flex-direction:column}.pg-salsify.pg-salsify .lg\:flex-row{flex-direction:row}.pg-salsify.pg-salsify .lg\:items-start{align-items:flex-start}.pg-salsify.pg-salsify .lg\:justify-center{justify-content:center}.pg-salsify.pg-salsify .lg\:gap-25{gap:calc(var(--g-spacing) * 25)}.pg-salsify.pg-salsify .lg\:pt-20{padding-top:calc(var(--g-spacing) * 20)}.pg-salsify.pg-salsify .lg\:pt-\[56px\]{padding-top:56px}.pg-salsify.pg-salsify .lg\:pt-\[95px\]{padding-top:95px}.pg-salsify.pg-salsify .lg\:pt-\[310\]{padding-top:310px}.pg-salsify.pg-salsify .lg\:pb-15{padding-bottom:calc(var(--g-spacing) * 15)}.pg-salsify.pg-salsify .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-salsify{--g-bg:#fff;--g-fg:#000;--g-accent-orange:#ef5a00;--g-ring:#d14e00;--g-selection-bg:#ef5a0038}@supports (color:lab(0% 0 0)){.pg-salsify{--g-bg:lab(100% 0 0);--g-fg:lab(0% 0 0)}}.pg-salsify [data-theme=dark]{--g-bg:#0f0d0d;--g-fg:#fff;--g-ring:var(--g-accent-orange);--g-selection-bg:#ef5a0047}@supports (color:lab(0% 0 0)){.pg-salsify [data-theme=dark]{--g-bg:lab(3.8965% .549272 .354368);--g-fg:lab(100% 0 0)}}.pg-salsify{height:100%;overflow-x:clip}.pg-salsify{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-salsify h1, .pg-salsify h2, .pg-salsify :is(h1,h2).font-display{font-family:var(--g-font-pixel-line);font-weight:400}.pg-salsify *, .pg-salsify, .pg-salsify :before, .pg-salsify :after{outline-color:var(--g-focus-ring-color,var(--g-ring))}.pg-salsify :focus-visible{outline:2px solid var(--g-focus-ring-color,var(--g-ring));outline-offset:2px}.pg-salsify ::selection{background:var(--g-selection-bg)}@media (prefers-reduced-motion:reduce){.pg-salsify *, .pg-salsify, .pg-salsify :before, .pg-salsify :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.pg-salsify .case-study-article{font-family:var(--g-font-geist);color:#666;letter-spacing:-.02em;font-size:16px;line-height:28.8px}.pg-salsify .case-study-article>:first-child{margin-top:0}.pg-salsify .case-study-article p, .pg-salsify .case-study-article ul{margin-top:20px}.pg-salsify .case-study-article ul{padding-left:1.5rem}.pg-salsify .case-study-article ul{list-style:outside}.pg-salsify .case-study-article li{margin-top:8px}.pg-salsify .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-salsify .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-salsify.pg-salsify [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-salsify.pg-salsify.pg-salsify > [data-theme=dark] { margin-top: 0; padding-top: var(--nav-clear); } /* ---- 2. type voice: Geist 600 headings, sentence case, the homepage's tracking */ .pg-salsify.pg-salsify .font-display { font-family: var(--font-sans); font-weight: 600; } .pg-salsify.pg-salsify 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-salsify.pg-salsify h1.text-product-hero { max-width: 1040px; } } @media (max-width: 809.98px) { .pg-salsify.pg-salsify h1.text-product-hero { font-size: 36px; line-height: 1.1; } } .pg-salsify.pg-salsify 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-salsify.pg-salsify .text-cta { letter-spacing: var(--h2-ls); color: var(--fg); } .pg-salsify.pg-salsify .pg-salsify-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-salsify.pg-salsify .case-study-article { color: var(--fg-body); letter-spacing: 0; /* body carries no tracking on the homepage (giga -0.02em) */ } .pg-salsify.pg-salsify .case-study-article h2, .pg-salsify.pg-salsify .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-salsify.pg-salsify [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-salsify.pg-salsify .case-study-article h2, .pg-salsify.pg-salsify .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-salsify.pg-salsify .case-study-article strong { color: var(--fg); } .pg-salsify.pg-salsify .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-salsify.pg-salsify .case-study-article a:hover { color: var(--accent); } } .pg-salsify.pg-salsify .case-study-article ul li::marker, .pg-salsify.pg-salsify .case-study-article ol li::marker { color: var(--fg-caption); } /* ---- 3. text colours: giga's greys → the homepage's whites */ .pg-salsify.pg-salsify .text-foreground\/50 { color: var(--fg-caption); } .pg-salsify.pg-salsify .text-foreground\/55 { color: var(--fg-body); } .pg-salsify.pg-salsify .text-foreground\/60 { color: var(--fg-caption); } .pg-salsify.pg-salsify .text-foreground\/80 { color: rgba(255, 255, 255, .82); } /* quote text, BRAND-DIALECT §2 (.82) */ .pg-salsify.pg-salsify .text-black { color: var(--fg); } .pg-salsify.pg-salsify .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-salsify.pg-salsify nav[aria-label="Table of contents"] a:hover { background-color: transparent; color: var(--fg); } } .pg-salsify.pg-salsify 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-salsify.pg-salsify 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-salsify.pg-salsify 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-salsify.pg-salsify 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-salsify.pg-salsify .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-salsify.pg-salsify .case-study-article h2[tabindex="-1"]:focus { outline: none; } /* the phone stats scroller, when focusable: the kit's ring (2px orange, 2px offset) */ .pg-salsify.pg-salsify [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-salsify.pg-salsify .pg-salsify-hero--photo img { object-fit: cover; object-position: 30% 100%; filter: grayscale(1) brightness(.88); } .pg-salsify.pg-salsify .pg-salsify-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-salsify.pg-salsify 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-salsify.pg-salsify .pg-salsify-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-salsify.pg-salsify .pg-salsify-mock { position: absolute; inset: 0; } .pg-salsify.pg-salsify .pg-salsify-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-salsify.pg-salsify .pg-salsify-window--a { left: calc(50% - var(--w) * .925); top: 0; } .pg-salsify.pg-salsify .pg-salsify-window--b { left: calc(50% - var(--w) * .075); top: 48px; } .pg-salsify.pg-salsify .pg-salsify-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-salsify.pg-salsify .pg-salsify-window-dots { display: inline-flex; gap: 5px; } .pg-salsify.pg-salsify .pg-salsify-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); } .pg-salsify.pg-salsify .pg-salsify-window img { display: block; width: 100%; height: auto; } @media (max-width: 809.98px) { .pg-salsify.pg-salsify .pg-salsify-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-salsify.pg-salsify .pg-salsify-window--a { left: calc(50% - var(--w) * .6); top: 0; } .pg-salsify.pg-salsify .pg-salsify-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-salsify.pg-salsify.pg-salsify-armed .pg-salsify-window--b { opacity: 0; transform: translateY(12px); } .pg-salsify.pg-salsify .pg-salsify-in .pg-salsify-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-salsify.pg-salsify.pg-salsify-armed .pg-salsify-window--b { transform: none; } } /* ---- 5. hero stat icons: giga's two-tone orange marks, in Gnar orange */ .pg-salsify.pg-salsify .pg-salsify-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-salsify.pg-salsify 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-salsify.pg-salsify .overflow-x-auto li > div[aria-hidden="true"]:first-child { height: 17px; display: flex; align-items: flex-end; } .pg-salsify.pg-salsify .pg-salsify-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-salsify.pg-salsify a[aria-label^="Share on"] { background-color: transparent; color: var(--fg-body); min-width: 40px; min-height: 40px; margin: -11px; padding: 0; } .pg-salsify.pg-salsify 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-salsify.pg-salsify 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-salsify.pg-salsify .pg-salsify-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-salsify.pg-salsify .case-study-article .h-px { background-color: transparent; } .pg-salsify.pg-salsify .pg-salsify-quote-card > div > [aria-hidden="true"] { display: none; } .pg-salsify.pg-salsify .pg-salsify-quote-card figcaption { padding-left: 0; } .pg-salsify.pg-salsify .pg-salsify-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-salsify.pg-salsify .pg-salsify-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-salsify.pg-salsify .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-salsify.pg-salsify .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-salsify.pg-salsify-armed [data-pg-salsify-enter] { opacity: 0; transform: translateY(10px); } .pg-salsify.pg-salsify [data-pg-salsify-enter].pg-salsify-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-salsify.pg-salsify-armed [data-pg-salsify-enter] { transform: none; } .pg-salsify [data-pg-salsify-enter].pg-salsify-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-salsify.pg-salsify 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-salsify.pg-salsify aside.lg\:sticky, .pg-salsify.pg-salsify div[aria-hidden="true"].lg\:block.lg\:shrink-0 { display: none; } .pg-salsify.pg-salsify .case-study-article { max-width: 672px; margin-inline: auto; } .pg-salsify.pg-salsify .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-salsify.pg-salsify .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-salsify.pg-salsify .pg-salsify-window-bar { white-space: nowrap; overflow: hidden; } @media (max-width: 399.98px) { .pg-salsify.pg-salsify .pg-salsify-window-dots { display: none; } } .pg-salsify.pg-salsify .pg-salsify-program { white-space: nowrap; } @media (max-width: 359.98px) { .pg-salsify.pg-salsify .pg-salsify-program { font-size: 20px; } } /* ===== page extra: src/css/header-overlap.css ===== */ /* Header overlap, below 768px. The kit's fixed header grows with the screen in this range (112px tall at 600, 143px at 767), while the case study's top spacing stays fixed, so from about 590px the header covered the Salsify logo line by up to 38px, fully hiding it on an iPad mini held upright (744px). The approved template does the same. This adds only the missing space (zero at 390px and below), keeping the 32px clearance the phone layout has; at 768px the header drops back to 74px and the template's own spacing returns. Same rule as pages/abuse-prevention/src/css/fixes.css. */ @media (max-width: 767px) { .pg-salsify article > div:first-child { margin-top: max(0px, calc(18.4vw - 72px)); } } /* ===== page extra: src/css/hero-fit.css ===== */ /* Hero frame aim for this study's photo. The template anchors its photo at 30% 100%, set for a person on the left; here the worker stands right of centre (his face at about 67% of the width) and his cap sits near the top. At 30% the phone frame showed only the racking and cut him out, and the desktop frame cut off the top of his head. 78% keeps him whole wherever the frame crops sideways (phone and tablet); 15% keeps his cap and the tablet where the frame crops top and bottom (desktop). The frame, its size and the grayscale grade are unchanged. */ .pg-salsify.pg-salsify .pg-salsify-hero--photo img { object-position: 78% 15%; } /* ===== page extra: src/css/no-stats.css ===== */ /* The live study prints no stats, so the hero's stats row is empty. port.mjs removes the stats list but leaves the row (an empty div with a 100px top margin on desktop) inside its entrance wrapper, and the h1 keeps the 40px space-y-10 margin above that row. Hide the empty wrapper and drop the h1's margin, only when the row is empty, so the photo's own top margin (100px desktop, 64px phone) is the whole gap. Same rules as pages/order-ahead. */ .pg-salsify [data-pg-salsify-enter="120"]:has(> div:empty:only-child) { display: none; } .pg-salsify .space-y-10:has(> [data-pg-salsify-enter="120"] > div:empty:only-child) > h1 { margin-block-end: 0; }