/* Emotify guide pages (guide/index.html, parents.html, schools.html). Built on styles.css tokens.
   Everything is prefixed gd-. The iPad device is drawn with CSS using container query units. */

:root { --gd-hdr: 68px; --gd-max: 1240px; --gd-gut: clamp(16px, 4vw, 40px); }
@media (max-width: 759px) { :root { --gd-hdr: 60px; } }

html { scroll-padding-top: calc(var(--gd-hdr) + 12px); }
.gd-body { background: var(--bg); overflow-x: hidden; }
.gd-body main { padding: 0; max-width: none; margin: 0; }
.gd-body main:focus { outline: none; }
.gd-wrap { max-width: var(--gd-max); margin: 0 auto; padding: 0 var(--gd-gut); }
.gd-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gd-noscript { max-width: 640px; margin: 80px auto; padding: 0 16px; }

/* ---------------------------------------------------------------- buttons */
.gd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px;
  padding: 12px 24px; border-radius: 999px; border: 2px solid var(--red); background: var(--red); color: #fff;
  font-weight: 700; font-size: 1.02rem; text-decoration: none; line-height: 1.2;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gd-btn:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(211, 17, 69, .6); }
.gd-btn .ico { transition: transform .2s ease; }
.gd-btn:hover .ico { transform: translateX(3px); }
.gd-btn-ghost { background: transparent; color: var(--red); }
.gd-btn-ghost:hover { background: var(--red-10); color: var(--red-dark); box-shadow: none; }
.gd-btn-light { background: #fff; border-color: #fff; color: var(--red); }
.gd-btn-light:hover { background: var(--red-10); border-color: var(--red-10); color: var(--red-dark); }
.gd-btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, .8); color: #fff; }
.gd-btn-outline-light:hover { background: rgba(255, 255, 255, .14); border-color: #fff; box-shadow: none; }
.gd-btn-sm { min-height: 40px; padding: 8px 18px; font-size: .92rem; }
.gd-body :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.gd-dark :focus-visible, .gd-cta :focus-visible, .gd-foot :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------- header */
.gd-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--char); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.gd-skip:focus { top: 10px; }
.gd-top { position: sticky; top: 0; z-index: 60; height: var(--gd-hdr); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.gd-top.is-scrolled { border-bottom-color: var(--char-10); box-shadow: 0 6px 24px -18px rgba(51, 61, 71, .5); }
.gd-top-in { max-width: calc(var(--gd-max) + 80px); margin: 0 auto; height: 100%; padding: 0 var(--gd-gut); display: flex; align-items: center; gap: 20px; }
.gd-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.gd-home { display: flex; align-items: center; text-decoration: none; border-radius: 10px; }
.gd-home:focus-visible, .gd-brand-sub:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
a.gd-brand-sub { text-decoration: none; }
a.gd-brand-sub:hover { color: var(--red); }
.gd-logo { height: 32px; width: auto; }
.gd-mark { display: none; width: 34px; height: 34px; }
.gd-brand-sub { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--char-80); padding-left: 10px; border-left: 1px solid var(--char-20); line-height: 1.3; }
.gd-nav { display: flex; gap: 4px; margin: 0 auto; }
.gd-nav a { position: relative; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .98rem; color: var(--char); transition: background .2s, color .2s; white-space: nowrap; }
.gd-nav a:hover { background: var(--red-10); color: var(--red); }
.gd-nav a[aria-current="page"] { background: var(--char); color: #fff; }
.gd-nav-short { display: none; }
.gd-top-r { display: flex; align-items: center; gap: 12px; flex: none; }
.gd-lang { display: flex; padding: 3px; border-radius: 999px; background: var(--char-5); border: 1px solid var(--char-10); }
.gd-lang button { border: 0; background: transparent; cursor: pointer; font-weight: 700; font-size: .82rem; letter-spacing: .04em; padding: 6px 11px; border-radius: 999px; color: var(--char-80); }
.gd-lang button[aria-pressed="true"] { background: var(--red); color: #fff; }
.gd-lang button:not([aria-pressed="true"]):hover { color: var(--red); }

@media (max-width: 1080px) { .gd-top-cta { display: none; } }
@media (max-width: 900px) { .gd-nav-long { display: none; } .gd-nav-short { display: inline; } .gd-brand-sub { display: none; } }
@media (max-width: 759px) {
  .gd-top-in { gap: 8px; }
  .gd-logo { display: none; }
  .gd-mark { display: block; width: 32px; height: 32px; }
  .gd-nav { margin: 0 auto; gap: 0; }
  .gd-nav a { padding: 7px 9px; font-size: .86rem; }
  .gd-lang button { padding: 5px 8px; font-size: .76rem; }
}
@media (max-width: 380px) { .gd-nav a { padding: 7px 6px; font-size: .8rem; } }

/* ---------------------------------------------------------------- type */
.gd-body h1, .gd-body h2 { color: var(--char); }
.gd-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--red-20); color: var(--red); font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.gd-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.gd-eyebrow { margin: 0 0 10px; font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.gd-lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--char-80); max-width: 62ch; margin: 0; }
.gd-body em { font-style: normal; color: var(--red); }

/* ---------------------------------------------------------------- hero */
.gd-hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 84px) 0 clamp(40px, 6vw, 72px); }
.gd-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.gd-hero-facets { position: absolute; width: min(760px, 70vw); right: -8%; top: 4%; height: auto; opacity: .16; }
.gd-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.gd-hero h1 { font-size: clamp(2.6rem, 5.3vw, 4.9rem); line-height: .92; letter-spacing: -.005em; margin: 0 0 22px; }
.gd-hero-lead { font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.55; color: var(--char-80); margin: 0 0 28px; max-width: 54ch; }
.gd-hero-note { margin: 20px 0 0; font-size: .92rem; color: var(--char-60); }
.gd-hero-dev { position: relative; }
.gd-hero-mo { position: absolute; right: -3%; bottom: 46px; width: 112px; transform: translateY(30%); filter: drop-shadow(0 10px 18px rgba(51, 61, 71, .18)); pointer-events: none; }
.gd-hero-txt > * { animation: gdUp .9s cubic-bezier(.2, .7, .2, 1) both; }
.gd-hero-txt > *:nth-child(2) { animation-delay: .08s; }
.gd-hero-txt > *:nth-child(3) { animation-delay: .16s; }
.gd-hero-txt > *:nth-child(4) { animation-delay: .24s; }
.gd-hero-txt > *:nth-child(5) { animation-delay: .32s; }
.gd-hero-dev { animation: gdRise 1.1s .15s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes gdUp { from { opacity: 0; transform: translateY(18px); } }
@keyframes gdRise { from { opacity: 0; transform: translateY(40px) scale(.97); } }
@media (max-width: 959px) {
  .gd-hero-in { grid-template-columns: minmax(0, 1fr); }
  .gd-hero-dev { max-width: 680px; width: 100%; margin: 0 auto; }
  .gd-hero-mo { width: 92px; right: -6px; bottom: 34px; }
  .gd-hero-facets { width: 120vw; right: -40%; top: auto; bottom: 0; }
}

.gd-facts { list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: #fff; border-radius: 22px; border: 1px solid var(--char-10); box-shadow: var(--shadow); overflow: hidden; }
.gd-facts li { padding: 22px 24px; border-left: 1px solid var(--char-10); }
.gd-facts li:first-child { border-left: 0; }
.gd-facts b { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1; color: var(--red); margin-bottom: 6px; }
.gd-facts span { font-size: .95rem; color: var(--char-80); line-height: 1.4; display: block; }
@media (max-width: 859px) { .gd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-facts li:nth-child(3) { border-left: 0; } .gd-facts li:nth-child(n+3) { border-top: 1px solid var(--char-10); } }
@media (max-width: 420px) { .gd-facts li { padding: 16px; } }

/* ---------------------------------------------------------------- sections */
.gd-sec { padding: clamp(64px, 9vw, 128px) 0; position: relative; }
.gd-sec-white { background: #fff; }
.gd-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: start; margin-bottom: clamp(32px, 5vw, 64px); }
.gd-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(4.2rem, 10vw, 9rem); line-height: .78; color: var(--red-20); letter-spacing: -.02em; }
.gd-head h2 { font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: .95; margin: 0 0 18px; max-width: 18ch; }
.gd-head.is-center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.gd-head.is-center .gd-num { font-size: clamp(3.4rem, 7vw, 6rem); }
.gd-head.is-center h2 { margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .gd-head { grid-template-columns: minmax(0, 1fr); gap: 4px; } .gd-num { font-size: 4rem; } }

/* reveals */
.gd-rv { opacity: 0; }
.gd-rv.is-in { opacity: 1; animation: gdReveal .85s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) backwards; }
@keyframes gdReveal { from { opacity: 0; transform: translateY(28px); } }
@keyframes gdFade { from { opacity: 0; } }

/* ---------------------------------------------------------------- cards */
.gd-cards { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd-cards.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-cards.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .gd-cards.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .gd-cards, .gd-cards.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gd-cards, .gd-cards.is-2, .gd-cards.is-3, .gd-cards.is-4 { grid-template-columns: minmax(0, 1fr); } }
.gd-card { background: #fff; border: 1px solid var(--char-10); border-radius: 22px; padding: clamp(22px, 2.6vw, 32px); box-shadow: 0 1px 2px rgba(51, 61, 71, .05), 0 18px 40px -28px rgba(51, 61, 71, .35); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; min-width: 0; }
.gd-card.is-in:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(51, 61, 71, .05), 0 26px 50px -28px rgba(51, 61, 71, .45); }
.gd-sec-white .gd-card { background: var(--char-5); border-color: transparent; box-shadow: none; }
.gd-sec-white .gd-card.is-in:hover { background: #fff; box-shadow: 0 24px 50px -30px rgba(51, 61, 71, .4); }
.gd-card h3 { font-size: 1.22rem; margin: 0 0 8px; }
.gd-card p { margin: 0; color: var(--char-80); font-size: 1rem; line-height: 1.55; }
.gd-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--red-10); color: var(--red); margin-bottom: 18px; }
.gd-sec-white .gd-ic { background: #fff; }
.gd-cards.is-feature .gd-card { padding: 24px; }

/* skills */
.gd-skill { display: flex; flex-direction: column; }
.gd-skill-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.gd-skill-n { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--red-20); line-height: 1; }
.gd-skill > p { flex: 1; }
.gd-skill-in { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--char-20); font-size: .93rem; line-height: 1.5; color: var(--char); }
.gd-skill-in b { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }

/* ---------------------------------------------------------------- method + dial */
.gd-method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-bottom: clamp(48px, 7vw, 96px); }
.gd-mstep { position: relative; padding-top: 8px; }
.gd-mstep-art { position: relative; width: 112px; height: 112px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; margin-bottom: 18px; }
.gd-mstep-art .mo { width: 92px; height: 92px; }
.gd-mstep-face { position: absolute; right: -6px; bottom: 2px; }
.gd-mstep .gd-mstep-k { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: .9; color: var(--red); }
.gd-mstep-k span { font-size: 1rem; color: var(--char-40); letter-spacing: .06em; }
.gd-mstep h3 { font-size: 1.2rem; margin: 6px 0 8px; }
.gd-mstep p { color: var(--char-80); margin: 0; }
@media (max-width: 800px) { .gd-method { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

.gd-dial { --fc: var(--red); background: var(--bg); border-radius: 28px; padding: clamp(22px, 4vw, 52px); }
.gd-dial-head { max-width: 680px; margin-bottom: 22px; }
.gd-dial-head h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1; margin: 0 0 10px; }
.gd-dial-head p:last-child { color: var(--char-80); margin: 0; }
.gd-dial-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.gd-dial-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 5px 6px; border-radius: 999px; border: 2px solid transparent; background: #fff; cursor: pointer; font-weight: 700; font-size: .95rem; color: var(--char); transition: border-color .2s, transform .2s; }
.gd-dial-tabs button:hover { transform: translateY(-1px); border-color: var(--char-20); }
.gd-dial-tabs button[aria-pressed="true"] { border-color: var(--fc); color: var(--char); box-shadow: 0 8px 20px -12px var(--fc); }
.gd-dial-tabs .face-svg { width: 34px; height: 34px; }
.gd-dial-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(4px, 1vw, 12px); align-items: end; height: clamp(200px, 22vw, 260px); }
.gd-lv { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; text-align: center; }
.gd-lv-bar { display: block; height: calc(22% + var(--i) * 13%); border-radius: 12px 12px 4px 4px; background: color-mix(in srgb, var(--fc) calc(28% + var(--i) * 12%), #fff); transform-origin: bottom; transition: background .45s ease, height .6s cubic-bezier(.2, .7, .2, 1); }
.gd-dial.gd-rv:not(.is-in) .gd-lv-bar { transform: scaleY(.1); }
.gd-dial.gd-rv .gd-lv-bar { transition: background .45s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: 0s, calc(var(--i) * 70ms + 200ms); }
.gd-lv-word { display: block; margin-top: 10px; font-weight: 700; font-size: clamp(.68rem, 1.25vw, 1rem); line-height: 1.15; color: var(--char); overflow-wrap: anywhere; hyphens: auto; }
.gd-lv small { display: block; margin-top: 2px; font-size: clamp(.62rem, 1vw, .78rem); font-weight: 600; color: var(--char-60); }
.gd-dial-bars.is-swap .gd-lv-word { animation: gdWord .45s ease both; animation-delay: calc(var(--i) * 30ms); }
.gd-dial-bars .gd-lv:nth-child(1) .gd-lv-word { --i: 0; }
@keyframes gdWord { from { opacity: 0; transform: translateY(6px); } }
.gd-dial-zones { display: grid; grid-template-columns: 3fr 1fr 3fr; gap: clamp(4px, 1vw, 12px); margin-top: 14px; }
.gd-zone { border-top: 5px solid; padding-top: 10px; font-size: .88rem; line-height: 1.35; min-width: 0; }
.gd-zone b { display: block; font-size: .9rem; }
.gd-zone span { color: var(--char-80); }
.gd-zone-calm { border-color: var(--zone-calm); }
.gd-zone-tip { border-color: var(--zone-tip); }
.gd-zone-hot { border-color: var(--zone-hot); }
.gd-dial-note { display: flex; gap: 10px; align-items: flex-start; margin: 24px 0 0; padding: 14px 18px; background: #fff; border-radius: 14px; font-size: .98rem; }
.gd-dial-note .ico { color: var(--red); margin-top: 3px; }
@media (max-width: 640px) {
  .gd-dial-zones { grid-template-columns: minmax(0, 1fr); }
  .gd-zone { border-top: 0; border-left: 5px solid; padding: 2px 0 2px 12px; }
  .gd-zone-calm { border-color: var(--zone-calm); } .gd-zone-tip { border-color: var(--zone-tip); } .gd-zone-hot { border-color: var(--zone-hot); }
  .gd-dial-bars { height: 220px; }
  .gd-lv-word { writing-mode: vertical-rl; transform: rotate(180deg); margin: 8px auto 0; font-size: .78rem; min-height: 6.2em; text-align: left; }
  .gd-dial-bars.is-swap .gd-lv-word { animation: none; }
  .gd-dial-tabs button { padding-right: 12px; font-size: .88rem; }
}

.gd-levels-wrap { margin-top: clamp(48px, 7vw, 88px); }
.gd-levels-head { max-width: 640px; margin-bottom: 24px; }
.gd-levels-head h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1; margin: 0 0 10px; }
.gd-levels-head p { margin: 0; color: var(--char-80); }
.gd-levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gd-levels > li { display: flex; }
.gd-lvl-btn { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--char-5); border: 2px solid transparent; border-radius: 20px; padding: 22px; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.gd-lvl-btn:hover { background: #fff; border-color: var(--red-20); transform: translateY(-2px); }
.gd-lvl-btn[aria-pressed="true"] { background: #fff; border-color: var(--red); box-shadow: 0 10px 28px rgba(211, 17, 69, .12); }
.gd-lvl-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.gd-lvl-dots { display: flex; gap: 4px; margin-bottom: 14px; }
.gd-lvl-dots i { width: 100%; height: 6px; border-radius: 3px; background: var(--char-20); }
.gd-lvl-dots i.on { background: var(--red); }
.gd-levels b { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1; color: var(--char); }
.gd-lvl-stage { display: inline-block; margin: 6px 0 8px; font-weight: 700; font-size: .85rem; color: var(--red); }
.gd-levels p { margin: 0; font-size: .95rem; color: var(--char-80); }
@media (max-width: 900px) { .gd-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .gd-levels { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- why */
.gd-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--char-10); }
.gd-why-item { padding: clamp(24px, 3vw, 40px) clamp(0px, 3vw, 40px) clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--char-10); }
.gd-why-item:nth-child(even) { padding-left: clamp(0px, 3vw, 40px); border-left: 1px solid var(--char-10); padding-right: 0; }
.gd-why-mark { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff; margin-bottom: 16px; }
.gd-why-item h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; margin: 0 0 10px; }
.gd-why-item p { margin: 0; color: var(--char-80); font-size: 1.05rem; }
.gd-care { display: flex; gap: 10px; align-items: flex-start; margin: 28px 0 0; color: var(--char-80); font-size: .95rem; }
.gd-care .ico { color: var(--red); margin-top: 3px; }
@media (max-width: 760px) { .gd-why { grid-template-columns: minmax(0, 1fr); } .gd-why-item, .gd-why-item:nth-child(even) { padding: 26px 0; border-left: 0; } }

/* ---------------------------------------------------------------- entry cards (hub) */
.gd-entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.gd-entry-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border-radius: 28px; overflow: hidden; border: 1px solid var(--char-10); box-shadow: 0 30px 60px -40px rgba(51, 61, 71, .5); transition: transform .35s ease, box-shadow .35s ease; }
.gd-entry-card.is-in:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(211, 17, 69, .45); }
.gd-entry-dev { padding: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) 0; background: var(--red); position: relative; overflow: hidden; }
.gd-entry-schools .gd-entry-dev { background: var(--char); }
.gd-entry-dev .gd-devslot { transform: translateY(14%); margin-top: -2%; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.gd-entry-card:hover .gd-entry-dev .gd-devslot { transform: translateY(8%); }
.gd-entry-txt { padding: clamp(24px, 3.4vw, 40px); position: relative; background: #fff; display: flex; flex-direction: column; flex: 1; }
.gd-entry-txt h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: clamp(2rem, 3.6vw, 3rem); line-height: .95; margin: 0 0 12px; color: var(--char); }
.gd-entry-txt > p { color: var(--char-80); margin: 0 0 16px; }
.gd-entry-txt ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.gd-entry-txt li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.gd-entry-txt li .ico { color: var(--red); margin-top: 3px; }
.gd-entry-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--red); font-size: 1.08rem; }
.gd-entry-cta .ico { transition: transform .25s; }
.gd-entry-card:hover .gd-entry-cta .ico { transform: translateX(5px); }
@media (max-width: 800px) { .gd-entry { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- dark band */
.gd-dark { background: var(--char); color: #fff; }
.gd-dark h2 { color: #fff; }
.gd-dark .gd-num { color: rgba(255, 255, 255, .14); }
.gd-dark .gd-eyebrow { color: var(--red-40); }
.gd-dark .gd-lead { color: rgba(255, 255, 255, .78); }
.gd-cards.is-dark .gd-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
.gd-cards.is-dark .gd-card.is-in:hover { background: rgba(255, 255, 255, .09); }
.gd-cards.is-dark h3 { color: #fff; }
.gd-cards.is-dark p { color: rgba(255, 255, 255, .78); }
.gd-cards.is-dark .gd-ic { background: var(--red); color: #fff; }
.gd-help { margin-top: clamp(20px, 3vw, 32px); padding: clamp(22px, 3vw, 32px); border-radius: 22px; background: #fff; color: var(--char); }
.gd-help h3 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; margin: 0 0 16px; }
.gd-help h3 .ico { color: var(--red); }
.gd-help-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.gd-help-lang { margin: 0 0 8px; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--char-60); }
.gd-help-line { margin: 0 0 8px; padding: 10px 14px; border-radius: 12px; background: var(--red-10); }
.gd-help-line b { display: block; color: var(--red-dark); }
.gd-help-line span { font-size: .95rem; }
@media (max-width: 700px) { .gd-help-groups { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- CTA band */
.gd-cta { position: relative; overflow: hidden; background: var(--red); color: #fff; padding: clamp(56px, 8vw, 110px) 0; }
.gd-cta-bg { position: absolute; inset: 0; pointer-events: none; }
.gd-cta-facets { position: absolute; width: min(620px, 80vw); right: -6%; bottom: -30%; opacity: .5; }
.gd-cta-in { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.gd-cta-mo { width: 150px; background: #fff; border-radius: 50%; padding: 14px; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .5); }
.gd-cta-mo .mo { width: 100%; height: auto; }
.gd-cta h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: .95; margin: 0 0 14px; }
.gd-cta p { font-size: 1.15rem; color: rgba(255, 255, 255, .92); margin: 0 0 24px; max-width: 56ch; }
.gd-login { display: inline-flex; flex-wrap: wrap; gap: 10px 24px; padding: 14px 20px; margin: 0 0 14px; border-radius: 16px; background: rgba(0, 0, 0, .16); border: 1px solid rgba(255, 255, 255, .25); }
.gd-login span { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, .78); }
.gd-login code { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; font-weight: 700; color: #fff; }
.gd-cta .gd-login-note { font-size: .95rem; margin: 0 0 24px; }
@media (max-width: 700px) { .gd-cta-in { grid-template-columns: minmax(0, 1fr); } .gd-cta-mo { width: 104px; } }

/* ---------------------------------------------------------------- footer */
.gd-foot { background: #262E36; color: rgba(255, 255, 255, .78); padding: 56px 0 40px; font-size: .95rem; }
.gd-foot-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 48px; }
.gd-foot-brand img { height: 40px; width: auto; margin-bottom: 14px; }
.gd-foot-brand p { margin: 0 0 6px; }
.gd-foot-tag { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--red-40); }
.gd-foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gd-foot-links b { display: block; color: #fff; margin-bottom: 10px; }
.gd-foot-links a { display: block; color: rgba(255, 255, 255, .78); text-decoration: none; padding: 4px 0; }
.gd-foot-links a:hover { color: #fff; text-decoration: underline; }
.gd-foot-fine { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px; font-size: .84rem; color: rgba(255, 255, 255, .6); }
.gd-foot-fine p { margin: 0 0 6px; }
@media (max-width: 700px) { .gd-foot-in { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- tips (parents) */
.gd-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.gd-tipcol { border-radius: 24px; padding: clamp(22px, 3vw, 36px); }
.gd-tip-do { background: var(--green-20); }
.gd-tip-avoid { background: var(--red-10); }
.gd-tipcol h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: 1.8rem; margin: 0 0 18px; }
.gd-tip-do h3 { color: var(--green-ink); }
.gd-tip-avoid h3 { color: var(--red); }
.gd-tipcol h3 .ico { width: 34px; height: 34px; padding: 6px; border-radius: 50%; color: #fff; }
.gd-tip-do h3 .ico { background: var(--green-ink); }
.gd-tip-avoid h3 .ico { background: var(--red); }
.gd-tipcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gd-tipcol li { background: #fff; border-radius: 14px; padding: 14px 18px; }
.gd-tipcol li b { display: block; margin-bottom: 2px; }
.gd-tipcol li span { color: var(--char-80); font-size: .97rem; }
.gd-starters { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin-top: clamp(20px, 3vw, 32px); padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: var(--bg); }
.gd-starters h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: 1.8rem; margin: 0 0 12px; color: var(--char); }
.gd-starters ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gd-starters li { display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 12px 16px; font-weight: 600; }
.gd-starters li .ico { color: var(--red); margin-top: 3px; }
@media (max-width: 760px) { .gd-tips, .gd-starters ul { grid-template-columns: minmax(0, 1fr); } .gd-starters { grid-template-columns: minmax(0, 1fr); } .gd-starters-mo { display: none; } }

/* ---------------------------------------------------------------- FAQ */
.gd-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.gd-faq-grid .gd-head { grid-template-columns: minmax(0, 1fr); gap: 6px; position: sticky; top: calc(var(--gd-hdr) + 24px); margin: 0; }
.gd-faq { border-top: 1px solid var(--char-20); }
.gd-faq details { border-bottom: 1px solid var(--char-20); }
.gd-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; font-weight: 700; font-size: 1.12rem; }
.gd-faq summary::-webkit-details-marker { display: none; }
.gd-faq summary:hover { color: var(--red); }
.gd-faq summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--red-10); }
.gd-faq summary i::before, .gd-faq summary i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; border-radius: 1px; background: var(--red); transition: transform .3s ease; }
.gd-faq summary i::after { transform: rotate(90deg); }
.gd-faq details[open] summary i::after { transform: rotate(0); }
.gd-faq details p { margin: 0; padding: 0 44px 22px 4px; color: var(--char-80); }
.gd-faq details[open] p { animation: gdUp .4s ease both; }
@media (max-width: 860px) { .gd-faq-grid { grid-template-columns: minmax(0, 1fr); } .gd-faq-grid .gd-head { position: static; } }

/* ---------------------------------------------------------------- schools: audience, flow, privacy, plan */
.gd-aud .illo { margin-bottom: 16px; }
.gd-aud ul, .gd-priv-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gd-aud li, .gd-priv-col li { display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; color: var(--char-80); line-height: 1.45; }
.gd-aud li .ico { color: var(--red); margin-top: 3px; }

.gd-flow { list-style: none; margin: 0 0 clamp(48px, 6vw, 80px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: f; }
.gd-flow > li { position: relative; padding: 24px; border-radius: 22px; background: var(--bg); }
.gd-flow > li:not(:last-child)::after { content: ""; position: absolute; top: 50px; right: -14px; width: 12px; height: 12px; border-top: 3px solid var(--red-40); border-right: 3px solid var(--red-40); transform: rotate(45deg); z-index: 1; }
.gd-flow-ic { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--red); color: #fff; margin-bottom: 14px; }
.gd-flow-n { position: absolute; top: 20px; right: 22px; font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--red-20); }
.gd-flow h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: 1.6rem; margin: 0 0 8px; }
.gd-flow p { margin: 0; color: var(--char-80); font-size: .98rem; }
@media (max-width: 1000px) { .gd-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-flow > li::after { display: none; } }
@media (max-width: 560px) { .gd-flow { grid-template-columns: minmax(0, 1fr); } }
.gd-subhead { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 0 0 20px; color: var(--char); }

.gd-priv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-bottom: clamp(16px, 2.4vw, 28px); }
.gd-priv-col { border-radius: 24px; padding: clamp(22px, 3vw, 36px); }
.gd-priv-see { background: #fff; border: 1px solid var(--char-10); }
.gd-priv-private { background: var(--char); color: #fff; }
.gd-priv-col h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: 1.8rem; margin: 0 0 18px; }
.gd-priv-see h3 { color: var(--char); } .gd-priv-see h3 .ico { color: var(--red); }
.gd-priv-private h3 { color: #fff; } .gd-priv-private h3 .ico { color: var(--red-40); }
.gd-priv-see li .ico { color: var(--green-ink); margin-top: 3px; }
.gd-priv-private li { color: rgba(255, 255, 255, .85); }
.gd-priv-private li .ico { color: var(--red-40); margin-top: 3px; }
.gd-card-warn { border-color: var(--zone-tip); }
.gd-card-warn .gd-ic { background: #FFF0DB; color: #B86500; }
.gd-roles { margin-top: clamp(32px, 4vw, 56px); }
.gd-roles h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: 1.8rem; margin: 0 0 14px; }
.gd-tablewrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--char-10); background: #fff; }
.gd-roles table { width: 100%; border-collapse: collapse; min-width: 520px; }
.gd-roles th, .gd-roles td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--char-10); vertical-align: top; font-size: .98rem; }
.gd-roles thead th { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--char-60); background: var(--char-5); }
.gd-roles tbody th { font-weight: 700; color: var(--red); white-space: nowrap; }
.gd-roles tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 760px) { .gd-priv { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .gd-roles table { min-width: 0; }
  .gd-roles thead { display: none; }
  .gd-roles tr { display: block; padding: 14px 18px; border-bottom: 1px solid var(--char-10); }
  .gd-roles tbody tr:last-child { border-bottom: 0; }
  .gd-roles th, .gd-roles td { display: block; padding: 2px 0; border: 0; }
}

.gd-plan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; position: relative; }
.gd-plan > li { position: relative; padding: 28px 26px; border-radius: 24px; background: var(--char-5); }
.gd-plan > li:nth-child(1) { background: var(--red); color: #fff; }
.gd-plan > li:nth-child(2) { background: var(--char); color: #fff; }
.gd-plan-k { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.gd-plan > li:nth-child(3) .gd-plan-k { background: var(--red-10); color: var(--red); }
.gd-plan h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: 2.2rem; margin: 12px 0 14px; color: inherit; }
.gd-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.gd-plan ul li { position: relative; padding-left: 22px; font-size: .98rem; line-height: 1.45; }
.gd-plan ul li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; opacity: .7; }
@media (max-width: 900px) { .gd-plan { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- journey */
.gd-jsec { padding-bottom: clamp(40px, 6vw, 80px); }
.gd-journey { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); }
.gd-j-steps { order: 1; list-style: none; margin: 0; padding: 16vh 0 12vh; }
.gd-j-stage { order: 2; }
.gd-j-stage-in { position: sticky; top: var(--gd-hdr); height: calc(100vh - var(--gd-hdr)); height: calc(100svh - var(--gd-hdr)); display: flex; flex-direction: column; justify-content: center; }
.gd-step { min-height: 78vh; display: flex; align-items: center; }
.gd-step-card { position: relative; padding: 4px 0 4px 26px; border-left: 3px solid var(--char-10); opacity: .32; transition: opacity .5s ease, border-color .5s ease; }
.gd-step.is-active .gd-step-card { opacity: 1; border-left-color: var(--red); }
.gd-step-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.gd-step-n { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: .8; color: var(--red); }
.gd-step-when { font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--char-60); }
.gd-role { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.gd-role-admin { background: var(--char); color: #fff; }
.gd-role-teacher { background: var(--red); color: #fff; }
.gd-role-student { background: var(--green-20); color: var(--green-ink); }
.gd-step h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: .95; margin: 0 0 12px; color: var(--char); }
.gd-step p { color: var(--char-80); font-size: 1.06rem; margin: 0; }
.gd-part { margin-top: 16px !important; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--red-20); font-size: .98rem !important; color: var(--char) !important; }
.gd-part b { display: flex; align-items: center; gap: 6px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }

@media (max-width: 959px) {
  .gd-journey { display: block; padding-left: 0; padding-right: 0; }
  .gd-j-stage { position: sticky; top: var(--gd-hdr); z-index: 5; padding: 10px var(--gd-gut) 12px; background: rgba(253, 242, 245, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .gd-j-stage-in { position: static; height: auto; display: block; }
  .gd-j-device { width: min(100%, calc(40svh * 1.42), 620px); margin: 0 auto; }
  .gd-j-steps { padding: 4vh var(--gd-gut) 30vh; }
  .gd-step { min-height: 62svh; align-items: flex-start; padding-top: 12px; }
  .gd-step-card { opacity: .35; }
  .gd-step h3 { font-size: 1.8rem; }
}

/* ---------------------------------------------------------------- the iPad Pro device */
.gd-devslot { position: relative; width: 100%; }
.gd-ipad { container-type: inline-size; position: relative; width: 100%; }
.gd-ipad-body {
  position: relative; padding: 2.9cqw; border-radius: 4.7cqw; background: #14181C;
  box-shadow:
    0 0 0 max(1px, .14cqw) #5D646B,
    0 0 0 max(2px, .34cqw) #2B3036,
    inset 0 0 0 max(1px, .18cqw) rgba(255, 255, 255, .07),
    0 3.4cqw 6.5cqw -2.6cqw rgba(51, 61, 71, .55),
    0 7cqw 12cqw -6cqw rgba(211, 17, 69, .28);
}
.gd-ipad-cam { position: absolute; left: 50%; top: 1.45cqw; width: .78cqw; height: .78cqw; min-width: 4px; min-height: 4px; margin-left: -.39cqw; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3E4A57 0, #11161B 55%, #050708 100%); box-shadow: 0 0 0 .12cqw #22282E; }
.gd-ipad-screen { position: relative; aspect-ratio: 4 / 3; border-radius: 1.8cqw; overflow: hidden; background: var(--bg); isolation: isolate; transform: translateZ(0); }
.gd-ipad-screen::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 34%), linear-gradient(0deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, 0) 30%); border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.gd-layer { position: absolute; inset: 0; overflow: hidden; background: var(--bg); will-change: transform, opacity; }
.gd-shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; display: block; will-change: transform; opacity: 0; transition: opacity .45s ease; }
.gd-layer.is-loaded .gd-shot { opacity: 1; }
.gd-ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); overflow: hidden; container-type: size; }
.gd-ph-facets { position: absolute; width: 62%; right: -10%; bottom: -24%; opacity: .2; }
.gd-ph-in { position: relative; text-align: center; display: grid; justify-items: center; gap: 2cqh; padding: 0 8cqw; }
.gd-ph-in .mo { width: 22cqh; height: 22cqh; }
.gd-ph-in b { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; color: var(--char); font-size: clamp(.8rem, 5.2cqh, 2.4rem); line-height: 1; max-width: 22ch; }
.gd-ph-in span { font-size: clamp(.6rem, 3cqh, 1rem); font-weight: 700; color: var(--red); letter-spacing: .08em; text-transform: uppercase; }
.gd-ph:not(.is-missing) .gd-ph-in { opacity: .55; }

/* journey device extras: callout chip + progress */
.gd-callout { position: absolute; left: -3%; bottom: 9%; z-index: 4; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 999px; background: #fff; color: var(--char); font-weight: 700; font-size: .95rem; box-shadow: 0 16px 34px -14px rgba(51, 61, 71, .55), 0 0 0 1px rgba(51, 61, 71, .06); max-width: 70%; }
.gd-callout-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: #fff; flex: none; }
.gd-callout-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-callout.is-pop { animation: gdPop .55s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes gdPop { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.gd-dev-meta { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 0 2%; }
.gd-dev-count { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--char); line-height: 1; flex: none; }
.gd-dev-count i { font-style: normal; color: var(--char-40); font-size: 1rem; margin-left: 4px; }
.gd-dev-bar { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.gd-dev-bar i { height: 4px; border-radius: 2px; background: var(--char-20); transition: background .4s ease; }
.gd-dev-bar i.is-past { background: var(--red-40); }
.gd-dev-bar i.is-now { background: var(--red); }
@media (max-width: 959px) {
  .gd-callout { display: none; }
  .gd-dev-meta { margin-top: 8px; gap: 10px; }
  .gd-dev-count { font-size: 1.1rem; }
}

/* hero controls */
.gd-dev-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.gd-dev-dots { display: flex; gap: 6px; }
.gd-dev-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.gd-dev-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--char-20); transition: width .35s ease, background .35s ease; }
.gd-dev-dots button[aria-current="true"]::before { width: 24px; background: var(--red); }
.gd-dev-dots button:hover::before { background: var(--red-40); }
.gd-dev-pp { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--char-20); background: #fff; color: var(--char); cursor: pointer; display: grid; place-items: center; }
.gd-dev-pp:hover { border-color: var(--red); color: var(--red); }

/* static device in the hub entry cards */
.gd-dev-static .gd-ipad-body { box-shadow: 0 0 0 max(1px, .14cqw) #5D646B, 0 0 0 max(2px, .34cqw) #2B3036, 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .45); }

/* ---------------------------------------------------------------- Mo animation (from companion.css) */
.gd-body .mo { display: block; overflow: visible; }
.gd-body .mo-anim .mo-body { animation: moBob 3.2s ease-in-out infinite; transform-origin: 60px 110px; }
.gd-body .mo-anim .mo-eye { animation: moBlink 5s infinite; transform-box: fill-box; transform-origin: center; }
.gd-body .mo-anim .mo-wave { animation: moWave 1.1s ease-in-out infinite; transform-origin: 97px 66px; }
@keyframes moBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes moBlink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes moWave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gd-rv.is-in { animation: gdFade .3s ease backwards; }
  .gd-hero-txt > *, .gd-hero-dev { animation: none; }
  .gd-body .mo-anim .mo-body, .gd-body .mo-anim .mo-eye, .gd-body .mo-anim .mo-wave { animation: none; }
  .gd-dial.gd-rv:not(.is-in) .gd-lv-bar { transform: none; }
  .gd-callout.is-pop, .gd-dial-bars.is-swap .gd-lv-word, .gd-faq details[open] p { animation: none; }
  .gd-card, .gd-entry-card, .gd-btn, .gd-entry-dev .gd-devslot { transition: none; }
  .gd-card.is-in:hover, .gd-entry-card.is-in:hover, .gd-btn:hover { transform: none; }
}

/* Vietnamese: stacked tone marks need a little more line height in condensed uppercase headings. */
html[lang="vi"] .gd-hero h1 { line-height: 1.04; }
html[lang="vi"] .gd-head h2, html[lang="vi"] .gd-cta h2 { line-height: 1.06; }
html[lang="vi"] .gd-step h3, html[lang="vi"] .gd-entry-txt h3, html[lang="vi"] .gd-why-item h3, html[lang="vi"] .gd-mstep-k,
html[lang="vi"] .gd-flow h3, html[lang="vi"] .gd-plan h3, html[lang="vi"] .gd-dial-head h3, html[lang="vi"] .gd-levels-head h3,
html[lang="vi"] .gd-facts b, html[lang="vi"] .gd-levels b { line-height: 1.1; }
@media (max-width: 600px) { .gd-hero-mo { width: 64px; right: -4px; bottom: 40px; } }

/* "by MonetHouseGroup" under the wordmark */
/* the logo's letters run from 35px to 128px (of 131) and stop 6px above its bottom edge */
.gd-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; }
.gd-by { display: block; margin: -3px 0 0 35px; font-family: var(--font-body); font-weight: 500; font-size: .66rem; letter-spacing: .01em; color: var(--char-60); line-height: 1; white-space: nowrap; }
.gd-by b { font-weight: 700; color: var(--char-80); }
@media (max-width: 759px) { .gd-lockup { display: none; } }

/* ---------- level wheel: what 1, 3, 5 and 7 mean ---------- */
.gd-lw-explain { display: flex; gap: 14px; align-items: flex-start; background: var(--bg); border-radius: 20px; padding: 18px 22px; margin: 0 0 22px; max-width: 980px; }
.gd-lw-explain > .ico { color: var(--red); flex: none; margin-top: 2px; }
.gd-lw-explain b { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 1.2rem; line-height: 1.1; margin-bottom: 4px; }
.gd-lw-explain p { margin: 0; color: var(--char-80); }
.gd-lw { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; background: #fff; border: 1px solid var(--char-10); border-radius: 26px; padding: clamp(18px, 3vw, 32px); margin-bottom: 18px; }
.gd-lw-art { display: grid; gap: 12px; justify-items: center; }
.gd-lw-wheel { width: 100%; max-width: 440px; aspect-ratio: 1; }
.gd-lw-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gd-lw-fam { cursor: pointer; }
.gd-lw-cell { fill: var(--fc); opacity: .08; stroke: #fff; stroke-width: 1.5; transition: opacity .35s ease; }
.gd-lw-cell.on { opacity: var(--o); }
.gd-lw-band { fill: var(--fc); opacity: .9; }
.gd-lw-name { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; fill: #fff; text-anchor: middle; pointer-events: none; }
.gd-lw-fam:hover .gd-lw-band, .gd-lw-fam.is-sel .gd-lw-band { opacity: 1; }
.gd-lw-fam.is-sel .gd-lw-band { stroke: var(--char); stroke-width: 2.5; }
.gd-lw-fam:not(.is-sel):hover .gd-lw-cell.on { opacity: calc(var(--o) * .85); }
.gd-lw-hub { fill: #fff; stroke: var(--char-10); stroke-width: 2; }
.gd-lw-num { font-family: var(--font-display); font-weight: 800; font-size: 30px; fill: var(--red); text-anchor: middle; }
.gd-lw-cap { font-family: var(--font-body); font-weight: 700; font-size: 7.5px; fill: var(--char-80); text-anchor: middle; text-transform: uppercase; letter-spacing: .06em; }
.gd-lw-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: .85rem; font-weight: 600; color: var(--char-80); }
.gd-lw-legend span { display: inline-flex; align-items: center; gap: 8px; }
.gd-lw-legend i { width: 22px; height: 12px; border-radius: 6px; background: var(--red); }
.gd-lw-legend i.out { opacity: .32; }
.gd-lw-detail h4 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1; margin: 2px 0 6px; color: var(--char); }
.gd-lw-k { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.gd-lw-count { margin: 0 0 14px; font-weight: 700; color: var(--char-80); }
.gd-lw-learn { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.gd-lw-learn li { display: flex; gap: 10px; align-items: flex-start; color: var(--char); }
.gd-lw-learn .ico { color: var(--red); flex: none; margin-top: 3px; }
.gd-lw-wordsk { color: var(--char-60); margin-bottom: 10px; }
.gd-lw-words { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gd-lw-chip { position: relative; display: inline-grid; gap: 1px; padding: 8px 12px; border-radius: 14px; background: #fff; border: 2px solid var(--fc); isolation: isolate; overflow: hidden; }
.gd-lw-chip::before { content: ''; position: absolute; inset: 0; background: var(--fc); opacity: calc(var(--o, .3) * .28); z-index: -1; }
.gd-lw-chip b { font-weight: 800; color: var(--char); line-height: 1.15; }
.gd-lw-chip small { font-size: .72rem; font-weight: 700; color: var(--char-60); }
.gd-lw-chip.is-family { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; color: #fff; background: var(--fc); }
.gd-lw-chip.is-family::before { display: none; }
.gd-lw-arrow { width: 14px; height: 2px; background: var(--char-20); border-radius: 2px; position: relative; }
.gd-lw-arrow::after { content: ''; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: var(--char-20); border-right: 0; }
.gd-lw-one { flex-basis: 100%; margin: 8px 0 0; color: var(--char-80); }
.gd-lw-tap { display: flex; gap: 8px; align-items: center; margin: 16px 0 0; font-size: .85rem; color: var(--char-60); }
.gd-lw-detail.is-swap { animation: gdLwSwap .35s ease; }
@keyframes gdLwSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html[lang="vi"] .gd-lw-detail h4, html[lang="vi"] .gd-lw-explain b { line-height: 1.15; }
@media (max-width: 900px) { .gd-lw { grid-template-columns: minmax(0, 1fr); } .gd-lw-wheel { max-width: 380px; } }
@media (prefers-reduced-motion: reduce) { .gd-lw-cell { transition: none; } .gd-lw-detail.is-swap { animation: none; } .gd-lvl-btn { transition: none; } }
@media (max-width: 560px) { .gd-lw-arrow { display: none; } }