/* Homepage sections rebuilt with their own (gt-) class names so the stacked older rules in
   reference/clean/rich-home.css cannot reach them. */

/* Service cards: Online Order, Book a Ride, Marketplace, Book an Appointment. */
/* .gt-reference prefix: outranks `.gt-reference .ref-wrap{margin:0 auto}` in reference-home.css. */
.gt-reference .gt-services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative;z-index:2;margin-top:-18px;margin-bottom:30px}
.gt-service{--tint:#fff5d2;--badge:#fecf08;--badge-ink:#173726;display:grid;grid-template-rows:auto 1fr;gap:12px;padding:12px;background:#fff;border:1px solid #e4ece2;border-radius:20px;box-shadow:0 10px 30px rgba(18,62,19,.07);color:#10291b;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.gt-service-ride,.gt-service-appointment{--tint:#e8f5ea;--badge:#087d3e;--badge-ink:#fff}
.gt-service:hover,.gt-service:focus-visible{color:#10291b;border-color:#cfe2cd;box-shadow:0 16px 36px rgba(18,62,19,.13);transform:translateY(-3px)}
.gt-service:focus-visible{outline:3px solid rgba(8,125,62,.35);outline-offset:2px}
.gt-service-media{display:flex;align-items:center;justify-content:center;height:122px;padding:8px;border-radius:14px;background:var(--tint);overflow:hidden}
.gt-service-media img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
/* Icon sits beside the title; description and link span the full width, link pinned to the bottom. */
.gt-service-body{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;align-items:center;column-gap:10px;row-gap:6px;min-width:0;padding:0 4px 4px}
.gt-service-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--badge);color:var(--badge-ink);font-size:17px;line-height:1}
.gt-service-icon::before{vertical-align:0}
.gt-service strong{font-size:17px;font-weight:800;line-height:1.2;letter-spacing:-.2px}
.gt-service-text,.gt-service-cta{grid-column:1/-1}
.gt-service-text{align-self:start;font-size:13px;line-height:1.45;color:#56695c}
.gt-service-cta{display:inline-flex;align-items:center;align-self:end;gap:6px;padding-top:2px;font-size:13px;font-weight:700;color:#087d3e}
.gt-service-cta i{transition:transform .18s ease}
.gt-service:hover .gt-service-cta i{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.gt-service,.gt-service-cta i{transition:none}.gt-service:hover,.gt-service:focus-visible{transform:none}}
/* Tablets: two roomy columns, photo beside text. */
@media(max-width:1100px){.gt-reference .gt-services{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px;margin-bottom:26px}.gt-service{grid-template-columns:42% minmax(0,1fr);grid-template-rows:none;gap:16px}.gt-service-media{height:136px;align-self:center}.gt-service-body{padding:6px 0}}
/* Phones: 2x2 tiles, photo on top. */
@media(max-width:560px){.gt-reference .gt-services{gap:10px;margin-top:14px;margin-bottom:22px}.gt-service{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px;padding:10px;border-radius:16px}.gt-service-media{min-height:0;height:96px;padding:6px;border-radius:12px}.gt-service-body{column-gap:8px;row-gap:5px;padding:0 2px 2px}.gt-service-icon{width:30px;height:30px;font-size:15px;border-radius:9px}.gt-service strong{font-size:15px}.gt-service-text,.gt-service-cta{font-size:12px}}

/* App downloads: one banner, then both app cards across the same width as the banner. */
.gt-apps{display:grid;gap:22px}
.gt-apps-banner{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;padding:30px 44px 0;border-radius:24px;background:#fff7c0;overflow:hidden}
/* Swat mountain line art fills the space between the text and the screenshots. */
.gt-apps-banner::before{content:"";position:absolute;right:290px;bottom:0;width:600px;height:216px;z-index:-1;opacity:.45;background:url('../images/swat-mountain-lines-v5.svg') center bottom/100% 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%);pointer-events:none}
@media(max-width:1199px){.gt-apps-banner::before{display:none}}
.gt-apps-copy{align-self:center;padding-bottom:30px}
.gt-apps-copy h2{font-size:32px;font-weight:800;line-height:1.15;letter-spacing:-1px;color:#153724;margin:0 0 10px}
.gt-apps-copy p{max-width:540px;font-size:15px;line-height:1.5;color:#4f6354;margin:0 0 18px}
.gt-apps-partner{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;background:#087d3e;color:#fff;font-size:14px;font-weight:700;text-decoration:none}
.gt-apps-partner:hover,.gt-apps-partner:focus-visible{background:#06652f;color:#fff}
/* App screenshots rise from the bottom edge of the banner. */
.gt-apps-banner img{display:block;width:auto;height:240px;border-radius:18px 18px 0 0;box-shadow:0 -6px 26px rgba(21,55,36,.12)}
.gt-apps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;scroll-margin-top:16px}
.gt-apps-grid .ref-store-button{max-width:260px}
.gt-app-icon{width:48px;height:48px;border-radius:12px;flex-shrink:0}
@media(max-width:767px){.gt-apps-grid{grid-template-columns:1fr}}
@media(max-width:600px){.gt-apps{gap:16px}.gt-apps-banner{grid-template-columns:1fr;gap:18px;padding:24px 20px 0;border-radius:20px}.gt-apps-copy{padding-bottom:0}.gt-apps-copy h2{font-size:26px}.gt-apps-copy p{font-size:14px}.gt-apps-banner img{justify-self:center;height:auto;width:100%;max-width:300px}}

/* Logo: brand mark + live wordmark, sharp at any screen density (replaces the cropped bitmap logo). */
.gt-logo{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.gt-reference .ref-brand.gt-logo img,.gt-reference .ref-footer-brand .gt-logo img{width:46px;height:46px;padding:0;border-radius:0;background:none;object-fit:contain}
.gt-logo-text{display:flex;flex-direction:column;line-height:1}
.gt-logo-name{font-size:27px;font-weight:800;letter-spacing:-1px;color:#0b6736}
.gt-logo-name b{font-weight:800;color:#e9ad00}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.gt-logo-name b{background:linear-gradient(180deg,#fbd123,#e6a500);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}}
.gt-logo small{margin-top:5px;font-size:10.5px;font-weight:600;color:#53705e;white-space:nowrap}
.gt-logo-light .gt-logo-name{color:#fff}
@media(max-width:1200px){.gt-reference .ref-brand.gt-logo img{width:40px;height:40px}.gt-logo-name{font-size:24px}.gt-logo small{font-size:9.5px}}
@media(max-width:600px){.gt-logo{gap:8px}.gt-reference .ref-brand.gt-logo img{width:36px;height:36px}.gt-logo-name{font-size:21px}.gt-logo small{font-size:8.5px;margin-top:3px}}

/* Hero: the Swat panorama fills the whole banner; a soft wash behind the text keeps it readable. */
.gt-reference .ref-hero{display:flex;align-items:center;min-height:clamp(460px,34vw,600px);background:#eef6e9}
.gt-reference .ref-hero-art{inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 45%;opacity:1}
.gt-reference .ref-hero:before{background:linear-gradient(90deg,rgba(255,253,243,.97) 0%,rgba(255,253,243,.93) 30%,rgba(255,253,243,.62) 44%,rgba(255,253,243,0) 60%)}
@media(max-width:1000px){.gt-reference .ref-hero:before{background:linear-gradient(90deg,rgba(255,253,243,.97) 0%,rgba(255,253,243,.92) 46%,rgba(255,253,243,.5) 62%,rgba(255,253,243,0) 78%)}}
/* Phones: text first, then the scene at full strength, framed on the penguin, car and phones. */
@media(max-width:600px){.gt-reference .ref-hero{display:block;min-height:0}.gt-reference .ref-hero-inner{padding:24px 18px 262px!important}.gt-reference .ref-hero-art{inset:auto 0 0 0;height:260px;object-position:85% 50%}.gt-reference .ref-hero:before{background:linear-gradient(180deg,#fffdf3 0%,#fffdf3 calc(100% - 280px),rgba(255,253,243,0) calc(100% - 205px))}}

/* Browse categories: 3D picture tiles. */
.gt-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.gt-cat{--cat-tint:#fff5d2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 8px 14px;border:1px solid #e4ece2;border-radius:18px;background:#fff;color:#173726;text-align:center;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.gt-cat:nth-child(6n+2){--cat-tint:#e8f5ea}.gt-cat:nth-child(6n+3){--cat-tint:#ffe9e1}.gt-cat:nth-child(6n+4){--cat-tint:#e5f0fb}.gt-cat:nth-child(6n+5){--cat-tint:#f2e9fb}.gt-cat:nth-child(6n){--cat-tint:#e1f5f1}
.gt-cat:hover,.gt-cat:focus-visible{color:#173726;border-color:#cfe2cd;box-shadow:0 12px 26px rgba(18,62,19,.1);transform:translateY(-3px)}
.gt-cat:focus-visible{outline:3px solid rgba(8,125,62,.35);outline-offset:2px}
.gt-cat-pic{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--cat-tint)}
.gt-cat-pic img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.12))}
.gt-cat-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:700;line-height:1.25}
.gt-cat.is-active{border-color:#087d3e;background:#f1f9f2;box-shadow:inset 0 0 0 1px #087d3e}
@media(prefers-reduced-motion:reduce){.gt-cat{transition:none}.gt-cat:hover,.gt-cat:focus-visible{transform:none}}
@media(max-width:1100px){.gt-cats{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
/* Small phones: one swipeable row running edge to edge. */
@media(max-width:480px){.gt-cats{display:flex;overflow-x:auto;gap:10px;margin-inline:-18px;padding:4px 18px 10px;scroll-snap-type:x mandatory;scroll-padding-inline:18px;scrollbar-width:none}.gt-cats::-webkit-scrollbar{display:none}.gt-cat{flex:0 0 92px;padding:12px 6px;scroll-snap-align:start}.gt-cat-pic{width:60px;height:60px}.gt-cat-pic img{width:40px;height:40px}.gt-cat-name{font-size:12px}}
.gt-cat-count{margin-top:-6px;font-size:11px;font-weight:600;color:#6b7f71}

/* Popular stores: full width under the categories; every store on the page is shown (4 across). */
.gt-reference .gt-discovery{display:block}
.gt-discovery .ref-store-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gt-discovery .ref-store-grid>.position-relative:nth-child(n){display:flex}
.gt-discovery .ref-store-grid .st-store-media{height:160px}
@media(max-width:1100px){.gt-discovery .ref-store-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.gt-discovery .ref-store-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gt-discovery .ref-store-grid .st-store-media{height:120px}}

/* How it works: a soft green panel with numbered steps beside the Track Your Order card. */
.gt-reference .clean-how{padding-top:12px!important;padding-bottom:36px!important;border-top:0}
.gt-how-panel{padding:34px 40px 40px;border-radius:28px;background:linear-gradient(135deg,#e6f4e9,#f4faf1 60%,#fdf8e1)}
.gt-how-panel .ref-section-title{margin-bottom:22px}
.gt-how-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:stretch}
.gt-how-grid>:only-child{grid-column:1/-1}
.clean-how .gt-how-grid .ref-benefit-grid{grid-template-columns:1fr;gap:12px;counter-reset:gt-step}
.clean-how .gt-how-grid .ref-benefit{position:relative;align-items:center;gap:18px;padding:18px 22px;border:1px solid #dcebdc;border-radius:18px;background:#fff;box-shadow:0 6px 18px rgba(18,62,19,.05);counter-increment:gt-step}
.clean-how .gt-how-grid .ref-benefit>i,.clean-how .gt-how-grid .ref-benefit:nth-child(n)>i{display:grid;place-items:center;width:50px;height:50px;flex:0 0 50px;border-radius:15px;background:#087d3e;color:#fff;font-size:22px}
/* Step number on the icon's corner. */
.clean-how .gt-how-grid .ref-benefit::before{content:counter(gt-step);position:absolute;left:58px;top:12px;display:grid;place-items:center;width:22px;height:22px;border:2px solid #fff;border-radius:50%;background:#fecf08;color:#173726;font-size:11px;font-weight:800}
.clean-how .gt-how-grid .ref-benefit h3{margin-bottom:4px;font-size:16px;font-weight:800;color:#153724}
.clean-how .gt-how-grid .ref-benefit p{margin:0;font-size:13px;color:#5b6f60}
.gt-how-grid .doorstep-tracking{grid-template-columns:minmax(0,1fr) minmax(0,230px);align-items:center;border-color:#dcebdc}
@media(max-width:900px){.gt-how-grid{grid-template-columns:1fr}}
@media(max-width:600px){.gt-how-panel{padding:24px 16px 18px;border-radius:22px}.clean-how .gt-how-grid .ref-benefit{gap:14px;padding:14px 16px}.clean-how .gt-how-grid .ref-benefit>i,.clean-how .gt-how-grid .ref-benefit:nth-child(n)>i{width:44px;height:44px;flex-basis:44px;font-size:20px}.clean-how .gt-how-grid .ref-benefit::before{left:46px;top:8px}.gt-how-grid .doorstep-tracking{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);padding:16px}}