/* Lot 7.5B — consolidated owner-approved How It Works V20 page-body presentation. */
.hiw-page {
  --white:#fff; --pearl:#fdfbf7; --ink:#010214; --grey:#6b7280; --border:#f3f4f6; --border-strong:#e5e7eb;
  --pink:#fca5a5; --mint:#99f6e4; --lavender:#c084fc; --pink-dark:#d66d77; --mint-dark:#3d9f8d; --lavender-dark:#9560c7;
  --gradient-brand:linear-gradient(90deg,#ef8d96 0%,#b46ee9 48%,#59cbb3 100%); --hiw-header-height:94px;
  background:var(--pearl); color:var(--ink); overflow-x:clip;
}
.hiw-page .shell { width:min(1280px,calc(100% - 40px)); margin-inline:auto; }
.hiw-page svg { display:block; }
.hiw-page a { color:inherit; }

/* Intro and seven-step flow. */
.hiw-intro { padding:76px 0 58px; background:var(--pearl); border-bottom:1px solid rgba(1,2,20,.055); }
.hiw-intro-inner { max-width:1280px; }
.hiw-intro h1 { max-width:none; margin:0; text-align:center; font-size:clamp(58px,6.8vw,84px); line-height:1.01; letter-spacing:-.057em; font-weight:700; overflow:visible; }
.hiw-title-gradient {
  display:inline-block; padding:.02em .08em .12em 0; margin-bottom:-.08em; color:transparent;
  background-image:var(--gradient-brand); background-size:245% 100%; background-position:0 50%; background-repeat:no-repeat;
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:hiwGradientDrift 3.15s cubic-bezier(.45,0,.55,1) infinite alternate; will-change:background-position;
}
@keyframes hiwGradientDrift { from { background-position:0 50%; } to { background-position:100% 50%; } }
.hiw-order-flow { margin-top:46px; padding-top:34px; border-top:1px solid rgba(1,2,20,.09); overflow:visible; }
.hiw-order-flow-track { display:grid; grid-template-columns:repeat(6,minmax(0,1fr) 30px) minmax(0,1fr); align-items:start; gap:6px; }
.hiw-order-flow-item {
  --flow-accent:var(--pink-dark); --flow-soft:rgba(252,165,165,.14); min-width:0;
  display:grid; grid-template-rows:58px minmax(44px,auto); justify-items:center; align-items:start; gap:11px; text-align:center;
}
.hiw-order-flow-item[data-tone="mint"] { --flow-accent:var(--mint-dark); --flow-soft:rgba(153,246,228,.18); }
.hiw-order-flow-item[data-tone="lav"] { --flow-accent:var(--lavender-dark); --flow-soft:rgba(192,132,252,.14); }
.hiw-order-flow-item[data-tone="rose"] { --flow-accent:var(--pink-dark); --flow-soft:rgba(252,165,165,.14); }
.hiw-order-flow-icon {
  width:58px; height:58px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--flow-accent) 21%,transparent);
  border-radius:18px; background:var(--flow-soft); color:var(--flow-accent); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.hiw-order-flow-icon svg { width:25px; height:25px; stroke-width:1.75; transition:transform .22s ease; }
.hiw-order-flow-item:hover .hiw-order-flow-icon { transform:translateY(-3px) scale(1.035); border-color:color-mix(in srgb,var(--flow-accent) 35%,transparent); box-shadow:0 10px 24px color-mix(in srgb,var(--flow-accent) 14%,transparent); }
.hiw-order-flow-item:hover .hiw-order-flow-icon svg { transform:translateY(-1px); }
.hiw-order-flow-item strong { max-width:145px; color:var(--ink); font-size:15px; line-height:1.32; font-weight:700; }
.hiw-order-flow-arrow { width:30px; height:58px; display:grid; place-items:center; align-self:start; color:#b8bdc7; }
.hiw-order-flow-arrow svg { width:22px; height:22px; stroke-width:1.55; }
.hiw-intro-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:28px; }
.hiw-hero-button {
  position:relative; isolation:isolate; overflow:hidden; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 17px; border-radius:999px; text-decoration:none; font-size:13.5px; font-weight:700;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease;
}
.hiw-hero-button::before { content:""; position:absolute; inset:-1px; z-index:0; width:0; border-radius:inherit; background:var(--gradient-brand); transition:width .42s cubic-bezier(.22,1,.36,1); pointer-events:none; }
.hiw-hero-button > * { position:relative; z-index:1; }
.hiw-hero-button svg { width:16px; height:16px; stroke-width:1.8; }
.hiw-page a.hiw-hero-button--primary { border:1px solid var(--ink); background:var(--ink); color:#fff; }
.hiw-page a.hiw-hero-button--secondary { border:1px solid var(--border-strong); background:#fff; color:var(--ink); }
.hiw-hero-button:hover,.hiw-hero-button:focus-visible { color:#fff; border-color:transparent; transform:translateY(-2px); box-shadow:0 12px 30px rgba(180,110,233,.20); }
.hiw-hero-button:hover::before,.hiw-hero-button:focus-visible::before { width:101%; }

/* Sticky operational cards. */
.hiw-steps-v5 { padding:70px 0 62px; background:#fff; }
.hiw-stack-v5 { position:relative; width:min(1240px,100%); margin:0 auto; padding-bottom:0; }
.hiw-step-card {
  --accent:var(--pink-dark); --accent-soft:rgba(252,165,165,.14); position:sticky;
  top:calc(var(--hiw-header-height) + 18px + var(--stack-offset,0px)); z-index:var(--stack-z,1); min-height:min(64vh,610px);
  margin-bottom:10vh; padding:clamp(38px,4vw,54px) clamp(40px,4.4vw,58px); overflow:hidden;
  border:1px solid rgba(1,2,20,.075); border-radius:30px; background:rgba(255,255,255,.99); box-shadow:0 22px 54px rgba(1,2,20,.085);
  isolation:isolate; scroll-margin-top:calc(var(--hiw-header-height) + 24px);
}
.hiw-step-card:last-child { margin-bottom:30px; }
.hiw-step-card::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle at 92% 10%,var(--accent-soft),transparent 29%); }
.hiw-step-card[data-tone="mint"] { --accent:var(--mint-dark); --accent-soft:rgba(153,246,228,.16); }
.hiw-step-card[data-tone="lav"] { --accent:var(--lavender-dark); --accent-soft:rgba(192,132,252,.13); }
.hiw-step-card[data-tone="rose"] { --accent:var(--pink-dark); --accent-soft:rgba(252,165,165,.14); }
.hiw-step-grid-v5 { display:flex; flex-direction:column; justify-content:center; gap:40px; min-height:100%; }
.hiw-step-heading { width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; }
.hiw-step-mark { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; margin-bottom:14px; }
.hiw-step-icon-v5 { width:66px; height:66px; display:grid; place-items:center; flex:0 0 66px; border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius:20px; background:var(--accent-soft); color:var(--accent); }
.hiw-step-icon-v5 svg { width:30px; height:30px; stroke-width:1.75; }
.hiw-step-number-v5 { color:var(--accent); font-size:13px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.hiw-step-card h2 { max-width:820px; margin:0 auto; text-align:center; font-size:clamp(34px,3.65vw,48px); line-height:1.06; letter-spacing:-.045em; font-weight:700; }
.hiw-key-list-v5 { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.hiw-key-item-v5 { display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; align-content:start; min-height:164px; padding:23px 22px; border:1px solid rgba(1,2,20,.065); border-radius:18px; background:rgba(255,255,255,.92); box-shadow:0 2px 12px rgba(1,2,20,.025); }
.hiw-key-check-v5 { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:var(--accent-soft); color:var(--accent); }
.hiw-key-check-v5 svg { width:23px; height:23px; stroke-width:1.8; }
.hiw-key-check-v5--text { font-size:13px; line-height:1; font-weight:800; letter-spacing:.02em; }
.hiw-key-item-v5 strong { display:block; margin:0 0 8px; color:var(--ink); font-size:20px; line-height:1.26; }
.hiw-key-item-v5 span { display:block; color:var(--grey); font-size:17.5px; line-height:1.52; text-align:left; }
.hiw-key-item-v5 a { color:var(--ink); font-weight:700; text-underline-offset:3px; }
.hiw-mobile-swipe-cue { display:none; }

/* Owner-approved operational hints. */
.hiw-step-hint { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:-14px; padding:14px 18px; border:1px solid rgba(138,101,18,.18); border-radius:14px; background:rgba(234,179,8,.10); color:#8a6512; text-align:center; }
.hiw-step-hint svg { width:19px; height:19px; flex:0 0 19px; stroke-width:1.8; }
.hiw-step-hint strong { font-size:15.5px; line-height:1.45; font-weight:700; }
.hiw-step-hint--info { border-color:rgba(149,96,199,.18); background:rgba(192,132,252,.10); color:#6f4699; }
.hiw-step-hint--mint { border-color:rgba(61,159,141,.18); background:rgba(153,246,228,.16); color:#2f806f; }
.hiw-step-hint--rose { border-color:rgba(214,109,119,.18); background:rgba(252,165,165,.14); color:var(--pink-dark); }

/* FAQ restored from the owner reference. */
.hiw-faq-section { padding:clamp(78px,8vw,108px) 0; background:radial-gradient(circle at 8% 6%,rgba(252,165,165,.10),transparent 28%),radial-gradient(circle at 92% 85%,rgba(153,246,228,.11),transparent 28%),var(--pearl); }
.hiw-faq-grid { display:grid; grid-template-columns:minmax(280px,.68fr) minmax(0,1.32fr); gap:clamp(42px,7vw,90px); align-items:start; }
.hiw-faq-intro { position:sticky; top:calc(var(--hiw-header-height) + 28px); }
.hiw-eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--pink-dark); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hiw-eyebrow svg { width:17px; height:17px; stroke-width:1.8; }
.hiw-faq-intro h2 { margin:10px 0 0; font-size:clamp(36px,4vw,52px); line-height:1.06; letter-spacing:-.045em; }
.hiw-faq-note { margin-top:22px; padding:15px 16px; border:1px solid rgba(1,2,20,.07); border-radius:16px; background:rgba(255,255,255,.78); color:#656b7b; font-size:13.5px; line-height:1.55; }
.hiw-faq-note a { color:var(--ink); font-weight:760; text-underline-offset:3px; }
.hiw-faq-list { border-top:1px solid rgba(1,2,20,.10); }
.hiw-faq-item { border-bottom:1px solid rgba(1,2,20,.10); }
.hiw-faq-item summary { list-style:none; display:grid; grid-template-columns:1fr 40px; gap:18px; align-items:center; min-height:86px; padding:18px 0; cursor:pointer; color:var(--ink); font-size:18.5px; font-weight:760; line-height:1.35; }
.hiw-faq-item summary::-webkit-details-marker { display:none; }
.hiw-faq-chevron { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--border-strong); border-radius:50%; background:#fff; color:#666c7b; transition:transform .25s ease,background .25s ease,border-color .25s ease,color .25s ease; }
.hiw-faq-chevron svg { width:18px; height:18px; }
.hiw-faq-item[open] .hiw-faq-chevron { transform:rotate(180deg); background:#fff0f1; border-color:#ffd8dc; color:#a64655; }
.hiw-faq-answer { padding:0 56px 22px 0; color:#606777; font-size:16px; line-height:1.62; }
.hiw-faq-answer p { margin:0; }
.hiw-whatsapp-link { color:var(--pink-dark); font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.hiw-whatsapp-link:hover { color:var(--ink); }

/* Smaller desktop/tablet: preserve three sub-cards until 860px. */
@media (max-width:1024px) {
  .hiw-page { --hiw-header-height:68px; }
  .hiw-intro { padding:60px 0 52px; }
  .hiw-intro h1 { font-size:clamp(52px,8.4vw,72px); }
  .hiw-order-flow { overflow-x:auto; overflow-y:hidden; padding-bottom:8px; scrollbar-width:none; }
  .hiw-order-flow::-webkit-scrollbar { display:none; }
  .hiw-order-flow-track { min-width:1110px; grid-template-columns:repeat(6,132px 28px) 132px; justify-content:start; gap:6px; }
  .hiw-order-flow-item strong { max-width:132px; }
  .hiw-stack-v5 { width:min(940px,100%); }
  .hiw-step-card { position:relative; top:auto; z-index:auto; min-height:0; margin-bottom:18px; padding-left:clamp(28px,3.5vw,42px); padding-right:clamp(28px,3.5vw,42px); }
  .hiw-key-list-v5 { gap:14px; }
  .hiw-key-item-v5 { min-height:0; padding:20px 17px; grid-template-columns:44px minmax(0,1fr); gap:13px; }
  .hiw-key-check-v5 { width:44px; height:44px; }
  .hiw-key-item-v5 strong { font-size:18px; }
  .hiw-key-item-v5 span { font-size:15.5px; line-height:1.5; }
  .hiw-faq-grid { grid-template-columns:1fr; }
  .hiw-faq-intro { position:relative; top:auto; }
}

/* Owner V10: one sub-card per swipe at 860px and below. */
@media (max-width:860px) {
  .hiw-stack-v5 { width:min(700px,100%); }
  .hiw-key-list-v5 { display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:100%; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; scrollbar-width:none; scroll-padding-inline:0; }
  .hiw-key-list-v5::-webkit-scrollbar { display:none; }
  .hiw-key-item-v5 { width:100%; min-height:170px; scroll-snap-align:start; scroll-snap-stop:always; grid-template-columns:48px minmax(0,1fr); align-items:start; padding:22px 20px; }
  .hiw-key-item-v5 > div:last-child { min-width:0; }
  .hiw-key-item-v5 strong { display:block; margin:0 0 9px; font-size:18.5px; line-height:1.3; }
  .hiw-key-item-v5 span { display:block; font-size:15.5px; line-height:1.58; text-align:left; }
  .hiw-key-check-v5 { width:48px; height:48px; }
  .hiw-mobile-swipe-cue { display:flex; align-items:center; justify-content:flex-end; gap:2px; height:22px; margin:-8px 2px 6px 0; color:#9da2ad; pointer-events:none; }
  .hiw-mobile-swipe-cue svg { width:17px; height:17px; stroke-width:1.8; }
  .hiw-mobile-swipe-cue svg:last-child { color:var(--pink-dark); animation:hiwSwipeCue 1.35s ease-in-out infinite; }
  .hiw-step-hint { margin-top:-6px; justify-content:flex-start; text-align:left; }
  .hiw-steps-v5 { padding-bottom:42px; }
  .hiw-step-card:last-child { margin-bottom:12px; }
}
@keyframes hiwSwipeCue { 0%,100% { transform:translateX(0); opacity:.72; } 50% { transform:translateX(4px); opacity:1; } }

@media (max-width:640px) {
  .hiw-intro { padding:50px 0 42px; }
  .hiw-intro h1 { font-size:clamp(46px,13vw,60px); }
  .hiw-order-flow { margin-top:34px; padding-top:26px; }
  .hiw-order-flow-track { min-width:1010px; grid-template-columns:repeat(6,120px 26px) 120px; gap:4px; }
  .hiw-order-flow-item { grid-template-rows:54px minmax(42px,auto); gap:9px; }
  .hiw-order-flow-icon { width:54px; height:54px; border-radius:17px; }
  .hiw-order-flow-icon svg { width:23px; height:23px; }
  .hiw-order-flow-arrow { width:26px; height:54px; }
  .hiw-order-flow-arrow svg { width:19px; height:19px; }
  .hiw-order-flow-item strong { max-width:120px; font-size:14px; }
  .hiw-intro-actions { justify-content:center; margin-top:22px; }
  .hiw-hero-button { min-height:44px; padding:10px 15px; font-size:13px; }
  .hiw-step-card { padding:28px 20px; border-radius:22px; }
  .hiw-step-grid-v5 { gap:24px; }
  .hiw-step-card h2 { font-size:31px; }
  .hiw-key-item-v5 { min-height:190px; }
  .hiw-faq-section { padding:62px 0; }
  .hiw-faq-intro h2 { font-size:34px; }
  .hiw-faq-item summary { min-height:72px; font-size:17px; grid-template-columns:1fr 36px; }
  .hiw-faq-chevron { width:34px; height:34px; }
  .hiw-faq-answer { padding-right:10px; font-size:15px; }
}
@media (max-width:560px) { .hiw-page .shell { width:calc(100% - 24px); } }
@media (hover:none) and (pointer:coarse) {
  .hiw-order-flow-item:hover .hiw-order-flow-icon { transform:none; box-shadow:none; }
  .hiw-order-flow-item:hover .hiw-order-flow-icon svg { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .hiw-title-gradient,.hiw-mobile-swipe-cue svg:last-child { animation:none !important; }
  .hiw-title-gradient { background-position:50% 50% !important; }
  .hiw-step-card { position:relative !important; top:auto !important; }
}