/* Home page extras (tools/render-home.cjs, home.js): matchmaker, trade-in, installation gallery,
   quick order form and FAQ. Uses the site's tokens from experience.css (--ink, --blue, --accent, --paper,
   --line, --muted, --display). */
.hm-head{max-width:760px;margin-bottom:28px}
.hm-head h2{font-size:clamp(42px,5vw,72px);text-wrap:balance}
.hm-head p{margin-top:12px;font-size:17px;color:var(--muted);max-width:60ch}

/* ---- Matchmaker ---- */
.hm-match-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,1fr);gap:clamp(28px,4vw,56px);padding:clamp(28px,4vw,52px);border-radius:16px;background:var(--ink);color:#fff}
.hm-match-card>*,.hm-trade-card>*{min-width:0}
.hm-match-controls h2{font-size:clamp(40px,4.4vw,64px);text-wrap:balance}
.hm-match-controls>p{margin-top:12px;font-size:16px;color:#b9c9de;max-width:52ch}
.hm-match-controls fieldset{margin:26px 0 0;padding:0;border:0}
.hm-match-controls legend{margin-bottom:10px;font-size:15px;font-weight:700;color:#fff}
.hm-choices{display:flex;flex-wrap:wrap;gap:10px}
.hm-choice{display:flex;flex-direction:column;justify-content:center;min-height:52px;padding:8px 18px;border:1.5px solid #ffffff4d;border-radius:12px;background:transparent;color:#fff;text-align:left;transition:background .2s,border-color .2s,color .2s,transform .15s var(--ease)}
.hm-choice b{font-size:16px}
.hm-choice small{font-size:14px;color:#b9c9de}
.hm-choice:hover{border-color:#fff}
.hm-choice:active{transform:scale(.98)}
.hm-choice[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.hm-choice[aria-pressed="true"] small{color:#33475f}
.hm-match-result{display:flex;flex-direction:column;padding:24px;border-radius:14px;background:#ffffff12;border:1px solid #ffffff26}
.hm-match-tag{align-self:flex-start;padding:4px 12px;border-radius:999px;background:var(--accent);color:var(--ink);font-size:14px;font-weight:700}
.hm-match-model{display:flex;align-items:center;gap:18px;margin-top:16px}
.hm-match-model img{width:112px;height:112px;object-fit:contain;flex:none;border-radius:12px;background:#ffffff14}
.hm-match-model h3{font-family:var(--display);font-size:clamp(34px,3.2vw,44px);line-height:1}
.hm-match-price{margin-top:6px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.hm-match-price strong{font-family:var(--display);font-size:34px;color:var(--accent);font-variant-numeric:tabular-nums}
.hm-match-price span{font-size:14px;color:#b9c9de}
.hm-match-promo{font-size:14px;font-weight:600;color:#fff}
.hm-match-facts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.hm-match-facts li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45}
.hm-match-facts svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--accent)}
.hm-match-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:auto;padding-top:22px}
.hm-match-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:15px;color:#fff;border-bottom:1px solid currentColor}
.hm-match-link:hover{color:var(--accent)}

/* ---- Trade-in ---- */
.hm-trade-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(28px,4vw,52px);border-radius:16px;background:var(--blue);color:#fff}
.hm-trade-tag{display:inline-block;padding:4px 12px;border-radius:999px;background:#fff;color:var(--blue);font-size:14px;font-weight:700}
.hm-trade-copy h2{margin-top:14px;font-size:clamp(40px,4.4vw,64px);text-wrap:balance}
.hm-trade-copy>p{margin-top:14px;font-size:17px;line-height:1.6;color:#e3edff;max-width:56ch}
.hm-trade-copy ul{list-style:none;margin:20px 0 26px;padding:0;display:grid;gap:10px}
.hm-trade-copy li{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600}
.hm-trade-copy li svg{width:20px;height:20px;flex:none;color:var(--accent)}
.hm-trade-copy .button{gap:12px}
.hm-trade-copy .button .wa-icon{width:22px;height:22px;color:#1ebe5b}
.hm-trade-media{position:relative;justify-self:end;width:min(100%,420px);aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#cfdcf2;box-shadow:0 24px 48px -20px rgb(7 30 57 / .35)}
.hm-trade-media video{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.hm-video-toggle{position:absolute;right:12px;bottom:12px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgb(7 30 57 / .7);color:#fff;backdrop-filter:blur(4px)}
.hm-video-toggle svg{width:20px;height:20px;fill:currentColor}
.hm-video-toggle .is-pause,.hm-video-toggle.is-playing .is-play{display:none}
.hm-video-toggle.is-playing .is-pause{display:inline}

/* ---- Installation gallery ---- */
.hm-gallery-strip{list-style:none;margin:0;padding:0 0 8px;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,24vw,300px);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin}
.hm-gallery-strip li{scroll-snap-align:start}
.hm-gallery-strip figure{position:relative;margin:0;aspect-ratio:4/3.3;border-radius:14px;overflow:hidden;background:#dbe5f1}
.hm-gallery-strip img{width:100%;height:100%;object-fit:cover}
.hm-gallery-strip figcaption{position:absolute;inset:auto 0 0;padding:40px 14px 12px;background:linear-gradient(transparent,rgb(7 30 57 / .85));color:#fff}
.hm-gallery-strip figcaption b{display:block;font-size:15px}
.hm-gallery-strip figcaption span{display:block;font-size:14px;color:#dbe6f5}

/* ---- Quick order form ---- */
.hm-order-card{padding:clamp(28px,4vw,52px);border:1px solid var(--line);border-radius:16px;background:#fff}
.hm-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;max-width:880px}
.hm-field label{display:block;margin-bottom:6px;font-size:15px;font-weight:700;color:var(--ink)}
.hm-field label small{font-size:14px;font-weight:500;color:var(--muted)}
.hm-field input,.hm-field select{width:100%;min-height:52px;padding:12px 14px;border:1.5px solid #c9d5e3;border-radius:12px;background:#fff;color:var(--ink);font-size:16px;transition:border-color .2s}
.hm-field input::placeholder{color:#7a8a9c}
.hm-field input:hover,.hm-field select:hover{border-color:#8fa3ba}
.hm-field input:focus,.hm-field select:focus{border-color:var(--blue)}
.hm-field [aria-invalid="true"]{border-color:#c62828}
.hm-field-wide,.hm-form-error,.hm-submit,.hm-form-note{grid-column:1/-1}
.hm-form-error{margin:0;padding:10px 14px;border-radius:10px;background:#fdecec;color:#a51c1c;font-size:15px;font-weight:600}
.hm-submit{justify-self:start;gap:12px;min-height:56px;padding:0 28px;font-size:17px;font-weight:700;border-radius:999px;cursor:pointer}
.hm-form-note{font-size:14px;color:var(--muted)}
.hm-form-note a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* ---- FAQ ---- */
.hm-faq-list{max-width:900px;border-top:2px solid var(--ink)}
.hm-faq-list details{border-bottom:1px solid var(--line)}
.hm-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:12px 0;cursor:pointer;font-size:18px;font-weight:700;list-style:none}
.hm-faq-list summary::-webkit-details-marker{display:none}
.hm-faq-list summary span{font-size:28px;font-weight:400;flex:none;transition:transform .2s}
.hm-faq-list details[open] summary span{transform:rotate(45deg)}
.hm-faq-list p{padding:0 0 20px;font-size:16px;line-height:1.7;color:#33475f;max-width:70ch}

@media(max-width:900px){
  .hm-match-card,.hm-trade-card{grid-template-columns:1fr}
  .hm-trade-media{justify-self:start;width:min(100%,360px)}
}
@media(max-width:760px){
  .hm-head h2{font-size:44px}
  .hm-match-card,.hm-trade-card,.hm-order-card{padding:24px 20px;border-radius:14px}
  .hm-match-controls h2,.hm-trade-copy h2{font-size:40px}
  .hm-choice{flex:1 1 calc(50% - 10px);min-width:0;padding:8px 14px}
  .hm-match-result{padding:20px 16px}
  .hm-match-model{align-items:flex-start;gap:14px}
  .hm-match-model img{width:76px;height:76px}
  .hm-match-price strong{font-size:30px;white-space:nowrap}
  .hm-match-actions .button{width:100%;gap:10px;padding:12px 14px;font-size:15px;white-space:normal;text-align:center;line-height:1.25}
  .hm-form{grid-template-columns:1fr}
  .hm-submit{justify-self:stretch}
  .hm-gallery-strip{grid-auto-columns:78%;margin-right:-21px;padding-right:21px}
  .hm-faq-list summary{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .hm-choice,.hm-faq-list summary span{transition:none}
}

/* ---- Headings in the site's own voice (bolder pass): the same condensed caps as "WHAT TO UPGRADE?" and
   "START FROM RM20.", with the key phrase on its own line in the accent colour (gold on dark, blue on light) ---- */
.hm-head h2,.hm-match-controls h2,.hm-trade-copy h2{line-height:.93;letter-spacing:-.018em}
.hm-head h2 span,.hm-match-controls h2 span,.hm-trade-copy h2 span{display:block}
.hm-head h2 span,.hm-trade-copy h2 span{color:var(--blue)}
.hm-match-controls h2 span{color:var(--accent)}
/* "SHOP BY BUDGET." banner under the picks: same display caps as the section headings around it */
.finder-banner h3{font-family:var(--display);font-size:clamp(40px,3.6vw,56px);font-weight:700;line-height:.93;letter-spacing:-.018em}
/* The matchmaker is the page's peak: biggest heading after the hero, and the answer (the price) reads first */
.hm-match-controls h2{font-size:clamp(48px,5.4vw,84px)}
.hm-match-price strong{font-size:clamp(38px,3.4vw,48px);line-height:1}
.hm-match-model h3{font-size:clamp(36px,3.4vw,48px)}

/* ---- Page rhythm (layout pass) ----
   Order: products → matchmaker → installations → promo → trade-in → form → FAQ, so heavy and light bands
   alternate: blue hero, paper products, ink matchmaker, paper photos, blue promo, light trade-in, paper end.
   Sections that are one framed card take half the usual padding, so card-to-card gaps stay ~88px, not 176px. */
.hm-match.section-space,.hm-trade.section-space{padding-top:44px;padding-bottom:44px}
.hm-gallery.section-space{padding-top:56px}
/* Trade-in comes straight after the blue promo band, so it is a light card instead of a second blue block */
.hm-trade-card{background:#e6eefc;color:var(--ink)}
.hm-trade-tag{background:var(--blue);color:#fff}
.hm-trade-copy>p{color:#33475f}
.hm-trade-copy li svg{color:var(--blue)}
.hm-trade-copy .button.light{background:var(--ink);color:#fff}
.hm-trade-copy .button.light:hover{background:#124275}
/* Wide screens: the form and the FAQ read as two columns (what it is on the left, the thing to do on the right),
   instead of one narrow column with an empty right half */
@media(min-width:1001px){
  .hm-order-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
  .hm-order-card .hm-head{margin:0;position:sticky;top:110px}
  .hm-order-card .hm-head h2{font-size:clamp(46px,4.2vw,64px)}
  .hm-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
  .hm-faq .hm-head{margin:0;position:sticky;top:110px}
  .hm-faq-list{max-width:none}
}
/* Phones: the 3 home picks become a sideways row (the next card peeks in), instead of 3 full screens of cards */
@media(max-width:760px){
  .hm-match.section-space,.hm-trade.section-space{padding-top:28px;padding-bottom:28px}
  .lineup .home-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-right:-21px;padding:0 21px 6px 0;gap:14px;scrollbar-width:none}
  .lineup .home-grid>*{scroll-snap-align:start}
  .lineup .home-grid .product-art{height:250px}
}

/* ---- Order form: a framed, bolder card (Abu: "nampak bold sikit, macam ada border outline") ----
   Ink outline + soft drop shadow lifts it off the page; fields get firmer 2px outlines that turn blue on focus. */
.hm-order-card{border:2px solid var(--ink);border-radius:20px;box-shadow:0 30px 60px -30px rgb(7 30 57 / .35)}
.hm-field input,.hm-field select{border-width:2px;border-color:#aebdd0;border-radius:12px}
.hm-field input:hover,.hm-field select:hover{border-color:var(--ink)}
.hm-field input:focus,.hm-field select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgb(7 91 234 / .15)}
.hm-field [aria-invalid="true"]{border-color:#c62828;box-shadow:0 0 0 4px rgb(198 40 40 / .12)}
@media(min-width:1001px){.hm-order-card .hm-head{padding-right:8px;border-right:1px solid var(--line);align-self:stretch}}

/* ==== Hero + "What to upgrade?" (bolder + distill pass) ====
   Hero essence: the headline, ONE product, ONE action, and the offer. The offer (RM20) used to sit in a
   bottom bar below the first screen; the hero now fits the screen and RM20 is the second-loudest thing on it.
   Elements stay in the HTML (experience.js updates them per slide); they are only hidden here. */
.motion-hero .hero-topline,.motion-hero .hero-callout,.motion-hero .scroll-cue{display:none}
.motion-hero #hero-count{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.motion-hero{height:auto;min-height:min(780px,calc(100svh - 124px))}
.motion-hero .hero-editorial{padding-top:72px}
.motion-hero .hero-price{display:grid;gap:4px}
.motion-hero .hero-price>span{font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#d9e6ff}
.motion-hero .hero-price strong{font-family:var(--display);font-size:clamp(64px,6.4vw,104px);line-height:.85;letter-spacing:-.02em;color:var(--accent)}
.motion-hero .hero-price strong small{font-family:var(--body);font-size:18px;font-weight:600;letter-spacing:0;color:#fff;margin-left:4px}
.motion-hero .hero-price>small{font-size:15px;color:#d9e6ff}
/* The price row flows under the headline and button (it was pinned to the bottom and ran into the button
   on short screens); the hero grows when it needs room, never shrinks the content into each other */
.motion-hero{display:flex;flex-direction:column}
.motion-hero .hero-bottom{position:relative;left:auto;right:auto;bottom:auto;margin:auto 42px 72px;padding-top:36px;border-top:0}
@media(min-width:1600px){.motion-hero .hero-bottom{margin-inline:max(42px,calc((100vw - 1480px)/2))}}
@media(max-width:1100px){.motion-hero .hero-bottom{margin-inline:28px}}
/* Short laptop screens (1280×720, 1366×768…): the headline scales with the screen height too, so RM20
   still lands above the fold instead of half under it */
@media(min-width:761px) and (max-height:860px){
  .motion-hero .hero-editorial{padding-top:36px}
  .motion-hero .hero-editorial h1{font-size:min(clamp(88px,10.7vw,170px),15.5svh)}
  .motion-hero .hero-editorial p{margin:16px 0}
  .motion-hero .hero-bottom{padding-top:20px;margin-bottom:28px}
  .motion-hero .hero-price strong{font-size:min(clamp(64px,6.4vw,104px),9svh)}
}
@media(max-width:760px){
  .motion-hero{min-height:calc(100svh - 86px);max-height:none}
  .motion-hero .hero-bottom{margin:auto 22px 72px;padding-top:28px}
  .motion-hero .hero-editorial{padding-top:40px}
  .motion-hero .hero-price strong{font-size:60px}
  .motion-hero .hero-price strong small{font-size:15px}
  .motion-hero .hero-bottom{min-height:120px}
}

/* What to upgrade: each card says what it is, what it costs, where to go. The compare +, spec strip and
   "good for" line are dropped here (the Products page keeps them); name and RM20 carry the card. */
.lineup .home-grid .compare-add,.lineup .home-grid .capacity-strip,.lineup .home-grid .card-fit{display:none}
.lineup .home-grid .product-art{height:360px}
.lineup .home-grid .card-body h3{font-family:var(--display);font-size:clamp(34px,2.9vw,44px);line-height:.95;text-transform:uppercase;letter-spacing:-.01em}
.lineup .home-grid .card-body>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:18px}
.lineup .home-grid .card-pricing strong{font-family:var(--display);font-size:clamp(56px,4.8vw,72px);line-height:.85;color:var(--blue)}
/* "SHOP BY BUDGET." becomes one band: heading, one line, one button. Its example models repeated the cards. */
.lineup .finder-models,.lineup .finder-banner-copy>.eyebrow{display:none}
.lineup .finder-banner{display:block;border-left:0;border-radius:16px;background:var(--ink);color:#fff;padding:28px 36px}
.lineup .finder-banner-copy{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px 40px}
.lineup .finder-banner-copy h3{margin:0;color:#fff}
.lineup .finder-banner-copy p{margin:0;color:#b9c9de;max-width:52ch}
.lineup .finder-banner-copy .button{background:var(--accent);color:var(--ink)}
@media(max-width:900px){.lineup .finder-banner-copy{grid-template-columns:1fr;gap:14px}.lineup .finder-banner-copy .button{justify-self:start}}
@media(max-width:760px){.lineup .home-grid .product-art{height:250px}.lineup .finder-banner{padding:24px 20px}}

/* The Month 2 FREE gift button (promo.js) steps aside while the hero price is on screen: it is pinned bottom-left,
   exactly where RM20 sits on short screens. home.js sets the class; it comes back once the visitor scrolls on. */
.deal-chip{transition:opacity .2s,visibility .2s}
body.is-hero-price .deal-chip{opacity:0;visibility:hidden}