/* Home · features (patterns/home-features.php): bento of eight live feature tiles.
   Every word lives in the blocks; assets/js/sections/hm-features.js turns them into the live stages:
   PageSpeed table → toggle + score rings + metric cards · Tabs (VI/DE/EN) → sliding thumb · list → drag to sort ·
   three buttons → page colour mode · Tabs in a phone frame → bottom tab bar, auto-play, context chips ·
   three buttons → effect on the card · chat paragraphs → messages typed one by one · list (size in <code>) → backup run.
   Paragraphs with the class hm-features__tpl are words the script reuses (typing label, backup states); they show only
   in the editor. The pointer glow border comes from the shared "dg-glow" class (base.css); the soft light inside a tile
   reads the same --mx / --my. */
@property --hm-features-tap-r{syntax:"<length>";inherits:false;initial-value:0px}
@property --hm-features-tap-a{syntax:"<percentage>";inherits:false;initial-value:0%}

.hm-features{
  --hm-features-row:220px;
  --hm-features-stage-min:120px;
  --hm-features-spot:420px;
  --hm-features-spot-stop:45%;
  --hm-features-lift:-3px;
  --hm-features-lift-shadow:0 18px 40px var(--shadow);
  --hm-features-ui-shadow:0 10px 24px var(--shadow);
  --hm-features-track-h3:-0.015em;
  --hm-features-track-tight:-0.02em;
  --hm-features-track-mono:.1em;
  --hm-features-track-tg:.08em;
  --hm-features-gap-xs:6px;
  --hm-features-gap-2xs:2px;
  --hm-features-z-under:-1;
  --hm-features-z-over:1;
  --hm-features-sr:1px;
  --hm-features-btn-shadow:0 3px 0 var(--accent-edge);
  --hm-features-z-top:3;
  --hm-features-z-chip:5;
  --hm-features-fade:180ms;
  --hm-features-slide:420ms;
  --hm-features-slide-x:24px;
  /* toggle */
  --hm-features-tg-pad:3px;
  --hm-features-tg-h:32px;
  --hm-features-tg-r:6px;
  --hm-features-pill-shadow:0 1px 3px var(--shadow);
  /* PageSpeed */
  --hm-features-psi-w:460px;
  --hm-features-gauge:72px;
  --hm-features-gauge-len:194.8;
  --hm-features-gauge-w:4.5;
  --hm-features-gauge-tint:12%;
  --hm-features-gauge-ink:78%;
  --hm-features-gauge-dur:1.1s;
  --hm-features-color-dur:400ms;
  /* drag list */
  --hm-features-dnd-w:220px;
  --hm-features-grip:12px;
  --hm-features-drag-dur:220ms;
  --hm-features-drag-shadow:0 12px 24px var(--shadow);
  /* colour mode swatches: the page background of each mode */
  /* ds-ok: each swatch must show its own mode's page colour (base.css :root / dark / moon) whatever mode is on */
  --hm-features-sw-light:oklch(97.5% 0.008 170);
  --hm-features-sw-dark:oklch(15% 0.004 250);
  --hm-features-sw-moon:oklch(19% 0.045 278);
  --hm-features-sw-w:48px;
  --hm-features-sw-h:36px;
  --hm-features-sw-bar-w:14px;
  --hm-features-sw-bar-h:6px;
  --hm-features-sw-bar-in:6px;
  --hm-features-ring-w:2px;
  /* phone (island = the phone's ::before) */
  --hm-features-ph-w:208px;
  --hm-features-ph-h:372px;
  --hm-features-ph-r:26px;
  --hm-features-ph-bw:6px;
  --hm-features-ph-depth:900px;
  --hm-features-ph-dur:500ms;
  --hm-features-ph-shadow:-18px 30px 50px var(--shadow);
  --hm-features-ph-t:15px;
  --hm-features-ph-cover:70px;
  --hm-features-ph-cover-r:3px;
  --hm-features-ph-gap:8px;
  --hm-features-island-top:6px;
  --hm-features-island-w:44px;
  --hm-features-island-w-live:74px;
  --hm-features-island-h:12px;
  --hm-features-island-dur:400ms;
  --hm-features-tab-t:9px;
  --hm-features-tab-ic:16px;
  --hm-features-tab-pad:6px 4px 10px;
  --hm-features-tab-in:4px;
  --hm-features-tab-ink-top:-7px;
  --hm-features-tab-ink-w:18px;
  --hm-features-tab-ink-h:2px;
  --hm-features-tap:34px;
  --hm-features-tap-y:40%;
  --hm-features-tap-dur:600ms;
  --hm-features-chip-pad:7px 10px;
  --hm-features-chip-ic:18px;
  --hm-features-chip-ic-i:11px;
  --hm-features-chip-c1-top:57%;
  --hm-features-chip-c2-bottom:21%;
  --hm-features-chip-dur:500ms;
  --hm-features-chip-delay:120ms;
  /* effect playground */
  --hm-features-fx-h:160px;
  --hm-features-fx-depth:700px;
  --hm-features-fx-btn:36px;
  --hm-features-fx-card:150px;
  --hm-features-fx-img:44px;
  --hm-features-fx-img-r:4px;
  --hm-features-fx-dur:380ms;
  --hm-features-fx-shadow:0 12px 26px var(--shadow);
  --hm-features-fx-lift:-12px;
  --hm-features-fx-scale:1.04;
  --hm-features-fx-lift-shadow:0 26px 40px var(--shadow);
  --hm-features-glare:oklch(100% 0 0 / .35); /* ds-ok: white sheen on the card, the same in every mode */
  --hm-features-glare-r:160px;
  --hm-features-glare-dur:300ms;
  /* chat */
  --hm-features-chat-w:250px;
  --hm-features-chat-h:260px;
  --hm-features-chat-fade:42%;
  --hm-features-bub-max:88%;
  --hm-features-bub-pad:8px 12px;
  --hm-features-bub-r:14px;
  --hm-features-bub-tail:4px;
  --hm-features-bub-in:8px;
  --hm-features-bub-dur:300ms;
  --hm-features-typing-in:6px;
  --hm-features-typing-dur:220ms;
  --hm-features-dot:6px;
  --hm-features-dot-gap:3px;
  --hm-features-dot-dur:1s;
  --hm-features-dot-step:.15s;
  --hm-features-dot-hop:-3px;
  /* backup */
  --hm-features-ring:96px;
  --hm-features-ring-len:251.3;
  --hm-features-ring-stroke:8;
  --hm-features-ring-ic:26px;
  --hm-features-ring-glow:0 0 6px var(--band);
  --hm-features-ring-pop:1.08;
  --hm-features-pop-dur:520ms;
  --hm-features-draw-dur:420ms;
  --hm-features-bob-dur:1.1s;
  --hm-features-bob:2px;
  --hm-features-st:14px;
  --hm-features-st-col:18px;
  --hm-features-st-bw:2px;
  --hm-features-st-ic:8px;
  --hm-features-spin-dur:800ms;
}
.hm-features .sec-head .hm-features__intro > *{margin-block:0}
.hm-features .sec-head .eyebrow{margin-bottom:var(--s-3)}
.hm-features .page > .hm-features__bento{margin:0}
/* the tiles lay out with gap: no flow margins inside the bento */
.hm-features__bento *{margin:0}

/* ---------- bento ---------- */
.hm-features__bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(var(--hm-features-row),auto);gap:var(--gap-grid);
  grid-template-areas:"seo seo lang lang" "seo seo drag mode" "phone fx fx chat" "phone bak bak chat"}
.hm-features__tile--seo{grid-area:seo}
.hm-features__tile--lang{grid-area:lang}
.hm-features__tile--drag{grid-area:drag}
.hm-features__tile--mode{grid-area:mode}
.hm-features__tile--phone{grid-area:phone}
.hm-features__tile--fx{grid-area:fx}
.hm-features__tile--chat{grid-area:chat}
.hm-features__tile--bak{grid-area:bak}

.hm-features__tile{--dg-glow-xy:1;position:relative;display:flex;flex-direction:column;gap:var(--gap-stack);min-width:0;padding:var(--gap-card);border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;isolation:isolate;
  transition:border-color var(--dur) var(--ease-press),transform var(--dur-m) var(--ease-out),box-shadow var(--dur-m) var(--ease-out)}
.hm-features__tile:not(.dots){background:var(--paper)} /* the dotted tiles (PageSpeed, phone, chat) keep the shared dot grid */
/* soft light under the pointer */
.hm-features__tile::before{content:"";position:absolute;inset:0;z-index:var(--hm-features-z-under);pointer-events:none;opacity:0;background:radial-gradient(var(--hm-features-spot) circle at var(--mx) var(--my), var(--accent-tint), transparent var(--hm-features-spot-stop));transition:opacity var(--dur-m) var(--ease-out)}
.hm-features__tile:hover{transform:translateY(var(--hm-features-lift));box-shadow:var(--hm-features-lift-shadow)}
.hm-features__tile:hover::before{opacity:1}
.hm-features__stage{flex:1;display:grid;place-items:center;min-height:var(--hm-features-stage-min);min-width:0}
.hm-features__cap{display:grid;gap:var(--s-1)}
.hm-features__row1{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2)}
.hm-features__row1 h3{font-size:var(--t-l);letter-spacing:var(--hm-features-track-h3)}
.hm-features__cap > p{color:var(--ink-2);font-size:var(--t-s)}
.hm-features__code{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--accent);white-space:nowrap}
/* words the script reuses (editor only) · keyboard hint for screen readers */
.hm-features__tpl{display:none}
.hm-features__sr{position:absolute;width:var(--hm-features-sr);height:var(--hm-features-sr);overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* the editor shows both, so they stay editable */
.editor-styles-wrapper :is(.hm-features__tpl,.hm-features__sr){position:static;display:block;width:auto;height:auto;clip-path:none;white-space:normal;font:500 var(--t-2xs)/1.4 var(--font-mono);color:var(--ink-3)}

/* ---------- segmented toggle (PageSpeed buttons made by the script · language tab list) ---------- */
/* .hm-features prefix: outranks core's flex layout rule (body .is-layout-flex) on the tab list */
.hm-features .hm-features__tg{--hm-features-pill-w:0;--hm-features-pill-x:0;position:relative;display:inline-flex;flex-wrap:nowrap;gap:var(--hm-features-tg-pad);width:auto;padding:var(--hm-features-tg-pad);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--paper-2)}
.hm-features .hm-features__tg button{position:relative;z-index:var(--hm-features-z-over);min-height:var(--hm-features-tg-h);padding:0 var(--s-3);border:0;border-radius:var(--hm-features-tg-r);background:transparent;font:600 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--hm-features-track-tg);color:var(--ink-2);cursor:pointer;transition:color var(--dur) var(--ease-press)}
.hm-features__tg button::before{content:none}
/* the parent theme tints tab buttons on hover: keep the toggle plain, as in the design */
.hm-features .hm-features__tg button:hover{background-color:transparent;color:var(--ink-2)}
.hm-features .hm-features__tg button:is([aria-pressed="true"],[aria-selected="true"]){color:var(--ink)}
.hm-features .hm-features__tg--words button{font-family:var(--font-body);letter-spacing:0}
/* sliding thumb: the script sets its width and offset from the chosen button */
.hm-features__tg.has-pill::after{content:"";position:absolute;top:var(--hm-features-tg-pad);bottom:var(--hm-features-tg-pad);left:0;width:var(--hm-features-pill-w);transform:translateX(var(--hm-features-pill-x));border-radius:var(--hm-features-tg-r);background:var(--card);box-shadow:var(--hm-features-pill-shadow);transition:transform var(--dur-m) var(--ease-out),width var(--dur-m) var(--ease-out)}

/* ---------- PageSpeed ---------- */
.hm-features__psi{display:grid;gap:var(--s-4);width:min(var(--hm-features-psi-w),100%)}
.hm-features__psi-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3)}
.hm-features__psi-label{font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--hm-features-track-mono);color:var(--ink-2)}
.hm-features__psi-data table{font-size:var(--t-xs)}
.hm-features__psi.is-ready .hm-features__psi-data{display:none}
.hm-features__gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);padding:var(--s-4) var(--s-3);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);box-shadow:var(--hm-features-ui-shadow)}
.hm-features__gauge{--hm-features-gc:var(--good);--hm-features-v:0;display:grid;justify-items:center;gap:var(--hm-features-gap-xs);text-align:center;font-size:var(--t-2xs);line-height:1.3;color:var(--ink-2)}
.hm-features__g{position:relative;width:var(--hm-features-gauge);height:var(--hm-features-gauge)}
.hm-features__g svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.hm-features__g-bg{fill:color-mix(in srgb, var(--hm-features-gc) var(--hm-features-gauge-tint), transparent);stroke:none;transition:fill var(--hm-features-color-dur) var(--ease-out)}
.hm-features__g-fg{fill:none;stroke:var(--hm-features-gc);stroke-width:var(--hm-features-gauge-w);stroke-linecap:round;stroke-dasharray:var(--hm-features-gauge-len);stroke-dashoffset:calc(var(--hm-features-gauge-len) * (1 - var(--hm-features-v) / 100));
  transition:stroke-dashoffset var(--hm-features-gauge-dur) var(--ease-out),stroke var(--hm-features-color-dur) var(--ease-out)}
.hm-features__g b{position:absolute;inset:0;display:grid;place-items:center;font:500 var(--t-xl)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:color-mix(in oklch, var(--hm-features-gc) var(--hm-features-gauge-ink), var(--ink));transition:color var(--hm-features-color-dur) var(--ease-out)}
.hm-features__metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.hm-features__metrics > div{--hm-features-mc:var(--good);display:grid;gap:var(--hm-features-gap-2xs);padding:var(--s-2) var(--s-3);border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
.hm-features__metrics small{font:500 var(--t-2xs)/1 var(--font-mono);letter-spacing:var(--hm-features-track-tg);color:var(--ink-3)}
.hm-features__metrics b{font:700 var(--t-m)/1.1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--hm-features-mc);transition:color var(--hm-features-color-dur) var(--ease-out)}

/* ---------- language ---------- */
.hm-features .hm-features__lang{display:grid;gap:var(--s-3);justify-items:start;width:100%}
.hm-features__lang-site{width:100%;padding:var(--s-3) var(--s-4);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card)}
.hm-features__lang-site .wp-block-tab-panel{display:grid;gap:var(--hm-features-gap-xs)}
.hm-features__lang-site .wp-block-tab-panel:not([hidden]){animation:hm-features-fade var(--hm-features-fade) var(--ease-press)}
.hm-features__lang-t{font:800 var(--t-xl)/1.1 var(--font-display);letter-spacing:var(--hm-features-track-tight)}
.hm-features__lang-s{font-size:var(--t-xs);color:var(--ink-2)}

/* ---------- drag to sort ---------- */
.hm-features__dnd{display:grid;gap:var(--hm-features-gap-xs);width:100%;max-width:var(--hm-features-dnd-w);padding:0;list-style:none}
.hm-features__dnd li{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border:1px solid var(--rule);border-radius:var(--r);background:var(--card);font-size:var(--t-xs);font-weight:600;cursor:grab;user-select:none;touch-action:none;
  transition:transform var(--hm-features-drag-dur) var(--ease-out),box-shadow var(--dur) var(--ease-press)}
.hm-features__dnd li::before{content:"";flex:none;width:var(--hm-features-grip);height:var(--hm-features-grip);background:var(--ink-2);-webkit-mask:url(../../../icons/grip.svg?ver=87eb2fbf) center / contain no-repeat;mask:url(../../../icons/grip.svg?ver=87eb2fbf) center / contain no-repeat}
.hm-features__dnd li.hm-features__dragging{position:relative;z-index:var(--hm-features-z-over);border-color:var(--accent-fill);box-shadow:var(--hm-features-drag-shadow);cursor:grabbing;transition:box-shadow var(--dur) var(--ease-press)}

/* ---------- colour modes ---------- */
.hm-features .hm-features__seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);width:100%}
.hm-features__seg .wp-block-button__link{display:grid;justify-items:center;gap:var(--hm-features-gap-xs);width:100%;min-height:0;padding:var(--s-2) 0;border:1px solid transparent;border-radius:var(--r-pill);background:transparent;box-shadow:none;color:var(--ink-2);font:400 var(--t-2xs)/1.2 var(--font-body);transition:border-color var(--dur) var(--ease-press)}
.hm-features__seg .wp-block-button__link:is(:hover,:active){border-color:var(--rule);transform:none;box-shadow:none}
.hm-features__seg .wp-block-button__link::before{content:"";display:block;width:var(--hm-features-sw-w);height:var(--hm-features-sw-h);border:1px solid var(--rule);border-radius:var(--r);
  background:linear-gradient(var(--accent-fill), var(--accent-fill)) left var(--hm-features-sw-bar-in) bottom var(--hm-features-sw-bar-in) / var(--hm-features-sw-bar-w) var(--hm-features-sw-bar-h) no-repeat,var(--hm-features-sw)}
.hm-features__mode-light{--hm-features-sw:var(--hm-features-sw-light)}
.hm-features__mode-dark{--hm-features-sw:var(--hm-features-sw-dark)}
.hm-features__mode-moon{--hm-features-sw:var(--hm-features-sw-moon)}
.hm-features__seg .wp-block-button__link[aria-pressed="true"]{color:var(--accent);font-weight:600}
.hm-features__seg .wp-block-button__link[aria-pressed="true"]::before{outline:var(--hm-features-ring-w) solid var(--accent-fill);outline-offset:var(--hm-features-ring-w)}

/* ---------- phone with a bottom tab bar (core Tabs) ---------- */
.hm-features__tile--phone .hm-features__ph-stage{position:relative;margin-inline:calc(var(--gap-card) * -1);padding-block:var(--s-5);perspective:var(--hm-features-ph-depth)}
.hm-features .hm-features__phone{--hm-features-ry:-8deg;--hm-features-rx:4deg;position:relative;display:flex;flex-direction:column;width:var(--hm-features-ph-w);height:var(--hm-features-ph-h);overflow:hidden;border:var(--hm-features-ph-bw) solid var(--ink);border-radius:var(--hm-features-ph-r);background:var(--card);box-shadow:var(--hm-features-ph-shadow);
  transform:rotateY(var(--hm-features-ry)) rotateX(var(--hm-features-rx));transition:transform var(--hm-features-ph-dur) var(--ease-out)}
.hm-features__phone::before{content:"";position:absolute;top:var(--hm-features-island-top);left:50%;z-index:var(--hm-features-z-top);width:var(--hm-features-island-w);height:var(--hm-features-island-h);border-radius:var(--wp--preset--border-radius--radius-full);background:var(--ink);transform:translateX(-50%);transition:width var(--hm-features-island-dur) var(--ease-out)}
.hm-features__phone.is-live::before{width:var(--hm-features-island-w-live)}
.hm-features__screens{flex:1;min-height:0}
.hm-features__screens .wp-block-tab-panel{display:grid;align-content:start;gap:var(--hm-features-ph-gap);height:100%;padding:var(--s-6) var(--s-3) var(--s-2);font-size:var(--t-2xs)}
.hm-features__phone.is-sl-r .wp-block-tab-panel:not([hidden]){animation:hm-features-sl-r var(--hm-features-slide) var(--ease-out)}
.hm-features__phone.is-sl-l .wp-block-tab-panel:not([hidden]){animation:hm-features-sl-l var(--hm-features-slide) var(--ease-out)}
.hm-features__ph-t{font:800 var(--hm-features-ph-t)/1.1 var(--font-display);letter-spacing:var(--hm-features-track-tight)}
.hm-features__ph-t--cover::after{content:"";display:block;height:var(--hm-features-ph-cover);margin-top:var(--hm-features-ph-gap);border-radius:var(--hm-features-ph-cover-r);background:var(--accent-tint)}
.hm-features__ph-rows table{width:100%;border-collapse:collapse;font-size:inherit}
.hm-features .hm-features__ph-rows td{padding:var(--hm-features-gap-xs) 0;border:0;border-bottom:1px solid var(--rule)}
.hm-features__ph-rows td:last-child{text-align:right}
.hm-features__ph-checks{padding:0;list-style:none}
.hm-features__ph-checks li{display:flex;align-items:center;justify-content:space-between;padding:var(--hm-features-gap-xs) 0;border-bottom:1px solid var(--rule)}
.hm-features__ph-checks li::after{content:"";width:var(--s-3);height:var(--s-3);background:var(--accent-fill);-webkit-mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat;mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat}
.hm-features__ph-btn{display:inline-flex;align-items:center;justify-self:start;min-height:var(--ctl-s);margin-top:var(--hm-features-ph-gap);padding:0 var(--s-4);border-radius:var(--r);background:var(--accent-fill);box-shadow:var(--hm-features-btn-shadow);color:var(--on-accent);font:600 var(--t-s)/1 var(--font-body)}
/* the chips inside a screen: what the editor shows; with the script they float beside the phone instead */
.hm-features__chip{font-weight:600;color:var(--accent)}
.hm-features--js .hm-features__screens .hm-features__chip{display:none}

.hm-features .hm-features__tabbar{order:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:var(--hm-features-tab-pad);border:0;border-top:1px solid var(--rule);background:var(--card)}
.hm-features .hm-features__tabbar button{position:relative;display:grid;justify-items:center;align-content:center;min-height:var(--s-5);gap:var(--hm-features-gap-2xs);width:auto;padding:var(--hm-features-tab-in) 0;border:0;background:radial-gradient(circle at 50% var(--hm-features-tap-y), color-mix(in srgb, var(--accent-tint) var(--hm-features-tap-a), transparent) var(--hm-features-tap-r), transparent var(--hm-features-tap-r));font:500 var(--hm-features-tab-t)/1 var(--font-body);color:var(--ink-3);white-space:nowrap;cursor:pointer}
.hm-features__tabbar button::after{content:"";order:-1;width:var(--hm-features-tab-ic);height:var(--hm-features-tab-ic);background:currentColor;-webkit-mask:var(--hm-features-ic) center / contain no-repeat;mask:var(--hm-features-ic) center / contain no-repeat}
.hm-features__tabbar button:not([data-hm-features-ic])::after{content:none}
.hm-features .hm-features__tabbar button:hover{background-color:transparent;color:var(--ink-3)}
.hm-features .hm-features__tabbar button[aria-selected="true"]{color:var(--accent)}
.hm-features__tabbar button::before{content:none}
.hm-features__tabbar button[aria-selected="true"]::before{content:"";position:absolute;top:var(--hm-features-tab-ink-top);bottom:auto;left:50%;width:var(--hm-features-tab-ink-w);height:var(--hm-features-tab-ink-h);border:0;border-radius:var(--hm-features-tab-ink-h);background:var(--accent-fill);transform:translateX(-50%)}
/* tap ripple behind the tab the phone just switched to */
.hm-features__tabbar button.is-tap{animation:hm-features-tap var(--hm-features-tap-dur) var(--ease-out)}

.hm-features__ph-chip{position:absolute;z-index:var(--hm-features-z-chip);display:inline-flex;align-items:center;gap:var(--hm-features-gap-xs);padding:var(--hm-features-chip-pad);border:1px solid var(--rule);border-radius:var(--wp--preset--border-radius--radius-full);background:var(--card);box-shadow:var(--hm-features-ui-shadow);color:var(--ink);font:600 var(--t-2xs)/1.2 var(--font-body);white-space:nowrap}
.hm-features__ph-chip i{display:grid;place-items:center;flex:none;width:var(--hm-features-chip-ic);height:var(--hm-features-chip-ic);border-radius:50%;background:var(--accent-tint)}
.hm-features__ph-chip i::before{content:"";width:var(--hm-features-chip-ic-i);height:var(--hm-features-chip-ic-i);background:var(--accent);-webkit-mask:var(--hm-features-ic) center / contain no-repeat;mask:var(--hm-features-ic) center / contain no-repeat}
.hm-features__ph-chip[hidden]{display:none}
.hm-features__ph-chip--c1{top:var(--hm-features-chip-c1-top);left:var(--s-3)}
.hm-features__ph-chip--c2{bottom:var(--hm-features-chip-c2-bottom);right:var(--s-3)}
.hm-features__ph-chip.is-swap{animation:hm-features-chip var(--hm-features-chip-dur) var(--ease-out)}
.hm-features__ph-chip--c2.is-swap{animation-delay:var(--hm-features-chip-delay);animation-fill-mode:backwards}

/* icons: tab buttons get data-hm-features-ic from their panel's class hm-features__tab-<icon>; chips use hm-features__ic-<icon> */
.hm-features [data-hm-features-ic="home"]{--hm-features-ic:url(../../../icons/home.svg?ver=797342c2)}
.hm-features [data-hm-features-ic="list"],.hm-features__ic-list{--hm-features-ic:url(../../../icons/list.svg?ver=1b055ffd)}
.hm-features [data-hm-features-ic="cal"]{--hm-features-ic:url(../../../icons/cal.svg?ver=cf7541d5)}
.hm-features [data-hm-features-ic="phone"],.hm-features__ic-phone{--hm-features-ic:url(../../../icons/phone.svg?ver=bbb55d77)}
.hm-features__ic-clock{--hm-features-ic:url(../../../icons/clock.svg?ver=ece0f1b6)}
.hm-features__ic-pin{--hm-features-ic:url(../../../icons/pin.svg?ver=7730b13a)}
.hm-features__ic-star{--hm-features-ic:url(../../../icons/star.svg?ver=a7f2069e)}
.hm-features__ic-check{--hm-features-ic:url(../../../icons/check.svg?ver=4227966a)}
.hm-features__ic-bell{--hm-features-ic:url(../../../icons/bell.svg?ver=0c199897)}

/* ---------- effect playground ---------- */
.hm-features__fx{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-5);width:100%}
.hm-features .hm-features__fx-opts{display:grid;gap:var(--s-2)}
.hm-features__fx-opts .wp-block-button__link{justify-content:flex-start;width:100%;min-height:var(--hm-features-fx-btn);padding:0 var(--s-3);border:1px solid var(--rule);border-radius:var(--r);background:transparent;box-shadow:none;color:var(--ink);font:500 var(--t-s)/1 var(--font-body);text-align:left;
  transition:border-color var(--dur) var(--ease-press),background-color var(--dur) var(--ease-press),color var(--dur) var(--ease-press)}
.hm-features__fx-opts .wp-block-button__link:is(:hover,:active){transform:none;box-shadow:none;border-color:var(--ink-2)}
.hm-features__fx-opts .wp-block-button__link[aria-pressed="true"]{border-color:var(--accent-fill);background:var(--accent-tint);color:var(--accent);font-weight:600}
.hm-features__fx-stage{position:relative;display:grid;place-items:center;height:var(--hm-features-fx-h);overflow:hidden;border-radius:var(--r-pill);perspective:var(--hm-features-fx-depth)}
.hm-features__fx-card{--hm-features-gx:50%;--hm-features-gy:0%;position:relative;display:grid;gap:var(--hm-features-gap-xs);width:var(--hm-features-fx-card);padding:var(--s-3);overflow:hidden;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);box-shadow:var(--hm-features-fx-shadow);
  transition:transform var(--hm-features-fx-dur) var(--ease-out),box-shadow var(--hm-features-fx-dur) var(--ease-out)}
.hm-features__fx-card::before{content:"";display:block;height:var(--hm-features-fx-img);border-radius:var(--hm-features-fx-img-r);background:var(--accent-tint)}
.hm-features__fx-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(var(--hm-features-glare-r) circle at var(--hm-features-gx) var(--hm-features-gy), var(--hm-features-glare), transparent 60%);transition:opacity var(--hm-features-glare-dur)}
.hm-features__fx-stage[data-hm-features-fx="tilt"]:hover .hm-features__fx-card::after{opacity:1}
.hm-features__fx-stage[data-hm-features-fx="lift"]:hover .hm-features__fx-card{transform:translateY(var(--hm-features-fx-lift)) scale(var(--hm-features-fx-scale));box-shadow:var(--hm-features-fx-lift-shadow)}
.hm-features__fx-t{font:800 var(--t-s)/1.1 var(--font-display)}
.hm-features__fx-s{font-size:var(--t-2xs);color:var(--ink-3)}

/* ---------- chat ---------- */
.hm-features__chat{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--hm-features-ph-gap);width:100%;max-width:var(--hm-features-chat-w);height:var(--hm-features-chat-h);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, currentColor var(--hm-features-chat-fade));mask-image:linear-gradient(to bottom, transparent 0, currentColor var(--hm-features-chat-fade))}
.hm-features__say{flex:none;max-width:var(--hm-features-bub-max);padding:var(--hm-features-bub-pad);border-radius:var(--hm-features-bub-r);font-size:var(--t-xs);line-height:1.4}
.hm-features__say--them{align-self:flex-start;border-bottom-left-radius:var(--hm-features-bub-tail);background:var(--paper-3)}
.hm-features__say--me{align-self:flex-end;border-bottom-right-radius:var(--hm-features-bub-tail);background:var(--accent-fill);color:var(--on-accent)}
.hm-features__bub{opacity:0;transform:translateY(var(--hm-features-bub-in));transition:opacity var(--hm-features-bub-dur) var(--ease-out),transform var(--hm-features-bub-dur) var(--ease-out)}
.hm-features__typing{flex:none;display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--hm-features-bub-pad);border-radius:var(--hm-features-bub-r);opacity:0;transform:translateY(var(--hm-features-typing-in));transition:opacity var(--hm-features-typing-dur) var(--ease-out),transform var(--hm-features-typing-dur) var(--ease-out)}
.hm-features__typing--them{align-self:flex-start;background:var(--paper-3)}
.hm-features__typing--me{align-self:flex-end;background:var(--accent-tint)}
.hm-features__typing small{font-size:var(--t-2xs);color:var(--ink-2)}
.hm-features__tdots{display:inline-flex;gap:var(--hm-features-dot-gap)}
.hm-features__tdots i{width:var(--hm-features-dot);height:var(--hm-features-dot);border-radius:50%;background:var(--ink-3);animation:hm-features-bounce var(--hm-features-dot-dur) infinite}
.hm-features__tdots i:nth-child(2){animation-delay:var(--hm-features-dot-step)}
.hm-features__tdots i:nth-child(3){animation-delay:calc(var(--hm-features-dot-step) * 2)}
.hm-features__bub.is-in,.hm-features__typing.is-in{opacity:1;transform:none}

/* ---------- backup ---------- */
.hm-features__bak{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);width:100%}
.hm-features__bak > :is(.hm-features__bak-list,.hm-features__bak-last){flex-basis:100%}
.hm-features__bak-body{flex:1;display:grid;gap:var(--s-2);min-width:0}
.hm-features__bak-list{display:grid;gap:var(--hm-features-gap-xs);padding:0;list-style:none;font-size:var(--t-xs)}
.hm-features__bak-list li{display:flex;justify-content:space-between;gap:var(--s-2);padding-bottom:var(--hm-features-gap-xs);border-bottom:1px solid var(--rule);transition:color var(--dur-m) var(--ease-out)}
.hm-features__bak-list code,.hm-features__bak-v{font-family:var(--font-mono);font-size:var(--t-2xs);color:var(--ink-3);background:none;padding:0}
.hm-features__bak-list li.hm-features__bak-row{display:grid;grid-template-columns:var(--hm-features-st-col) minmax(0,1fr) auto;align-items:center}
.hm-features__bak-st{display:grid;place-items:center;width:var(--hm-features-st);height:var(--hm-features-st);border:var(--hm-features-st-bw) solid var(--rule);border-radius:50%;color:var(--on-accent)}
.hm-features__bak-st::before{content:"";display:none;width:var(--hm-features-st-ic);height:var(--hm-features-st-ic);background:currentColor;-webkit-mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat;mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat}
.hm-features__bak-row.is-pending{color:var(--ink-3)}
.hm-features__bak-row.is-run .hm-features__bak-st{border-color:var(--accent-fill) transparent;animation:hm-features-spin var(--hm-features-spin-dur) linear infinite}
.hm-features__bak-row.is-run .hm-features__bak-v{color:var(--accent)}
.hm-features__bak-row.is-ok .hm-features__bak-st{border-color:var(--accent-fill);background:var(--accent-fill)}
.hm-features__bak-row.is-ok .hm-features__bak-st::before{display:block}
.hm-features__bak-last{margin-top:var(--hm-features-gap-2xs);font-size:var(--t-2xs);color:var(--ink-3)}
.hm-features__bak-last strong{font-weight:600;color:var(--accent)}

.hm-features__ring{--hm-features-bp:0;position:relative;flex:none;width:var(--hm-features-ring);height:var(--hm-features-ring)}
.hm-features__ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.hm-features__ring circle{fill:none;stroke-width:var(--hm-features-ring-stroke)}
.hm-features__ring-bg{stroke:var(--paper-3)}
.hm-features__ring-fg{stroke:var(--accent-fill);stroke-linecap:round;stroke-dasharray:var(--hm-features-ring-len);stroke-dashoffset:calc(var(--hm-features-ring-len) * (1 - var(--hm-features-bp)))}
.hm-features__ring-core{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:var(--hm-features-gap-2xs);color:var(--accent)}
.hm-features__ring-core i{position:relative;display:block;width:var(--hm-features-ring-ic);height:var(--hm-features-ring-ic)}
.hm-features__ring-core i::before,.hm-features__ring-core i::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--hm-features-ic) center / contain no-repeat;mask:var(--hm-features-ic) center / contain no-repeat}
.hm-features__ring-cloud::before{--hm-features-ic:url(../../../icons/cloud.svg?ver=a067bbbd)}
.hm-features__ring-cloud::after{--hm-features-ic:url(../../../icons/upload.svg?ver=12a91291);animation:hm-features-bob var(--hm-features-bob-dur) var(--ease-press) infinite}
.hm-features__ring-core .hm-features__ring-done{display:none} /* out-ranks .hm-features__ring-core i{display:block} */
.hm-features__ring-done::before{--hm-features-ic:url(../../../icons/done.svg?ver=06f2f31e)}
.hm-features__ring-core .hm-features__ring-done::after{content:none} /* out-ranks .hm-features__ring-core i::after, which would paint it as an unmasked square */
.hm-features__ring-core b{font:600 var(--t-2xs)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.hm-features__ring.is-done{animation:hm-features-pop var(--hm-features-pop-dur) var(--ease-out)}
.hm-features__ring.is-done .hm-features__ring-cloud{display:none}
.hm-features__ring.is-done .hm-features__ring-core .hm-features__ring-done{display:block}
.hm-features__ring.is-done .hm-features__ring-done::before{animation:hm-features-draw var(--hm-features-draw-dur) var(--ease-out)}
.hm-features__ring.is-done .hm-features__ring-fg{filter:drop-shadow(var(--hm-features-ring-glow))}

@keyframes hm-features-fade{from{opacity:0}}
@keyframes hm-features-sl-r{from{opacity:0;transform:translateX(var(--hm-features-slide-x))}}
@keyframes hm-features-sl-l{from{opacity:0;transform:translateX(calc(var(--hm-features-slide-x) * -1))}}
@keyframes hm-features-tap{from{--hm-features-tap-r:calc(var(--hm-features-tap) * .1);--hm-features-tap-a:100%}to{--hm-features-tap-r:calc(var(--hm-features-tap) * .7);--hm-features-tap-a:0%}}
@keyframes hm-features-chip{from{opacity:0;transform:translateY(var(--hm-features-bub-in)) scale(.9)}}
@keyframes hm-features-bounce{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(var(--hm-features-dot-hop));opacity:1}}
@keyframes hm-features-spin{to{transform:rotate(1turn)}}
@keyframes hm-features-bob{0%{transform:translateY(var(--hm-features-bob));opacity:.5}60%{transform:translateY(calc(var(--hm-features-bob) * -1));opacity:1}100%{transform:translateY(calc(var(--hm-features-bob) * -1));opacity:0}}
@keyframes hm-features-pop{40%{transform:scale(var(--hm-features-ring-pop))}100%{transform:none}}
@keyframes hm-features-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

@media (max-width: 991px){
  .hm-features__bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"seo seo" "lang lang" "drag mode" "phone chat" "fx fx" "bak bak"}
}
@media (max-width: 767px){
  .hm-features__bento{grid-template-columns:minmax(0,1fr);grid-template-areas:"seo" "lang" "drag" "mode" "phone" "chat" "fx" "bak"}
  .hm-features__gauges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-features__fx{grid-template-columns:minmax(0,1fr)}
  .hm-features .hm-features__fx-opts{display:flex;flex-wrap:wrap}
  .hm-features__fx-opts .wp-block-button{flex:1 1 auto}
  .hm-features__fx-opts .wp-block-button__link{justify-content:center;padding:0 var(--s-3);font-size:var(--t-xs);text-align:center;white-space:nowrap}
  .hm-features__tile--phone .hm-features__ph-stage{padding-inline:var(--s-2)}
  .hm-features__ph-chip--c1{left:0}
  .hm-features__ph-chip--c2{right:0}
}
@media (prefers-reduced-motion: reduce){
  .hm-features__tile,.hm-features__tile::before,.hm-features__tg.has-pill::after,.hm-features__g-fg,.hm-features__g-bg,.hm-features__g b,.hm-features__metrics b,
  .hm-features__dnd li,.hm-features .hm-features__phone,.hm-features__phone::before,.hm-features__fx-card,.hm-features__fx-card::after,.hm-features__bub,.hm-features__typing{transition:none}
  .hm-features__tile:hover{transform:none}
  .hm-features__lang-site .wp-block-tab-panel:not([hidden]),.hm-features__phone:is(.is-sl-r,.is-sl-l) .wp-block-tab-panel:not([hidden]),
  .hm-features__ph-chip.is-swap,.hm-features__tabbar button.is-tap,.hm-features__tdots i,.hm-features__bak-row.is-run .hm-features__bak-st,.hm-features__ring-cloud::after,
  .hm-features__ring.is-done,.hm-features__ring.is-done .hm-features__ring-done::before{animation:none}
  .hm-features__bub,.hm-features__typing{opacity:1;transform:none}
}