/* mydu.app/ — the catalogue. Loaded after base.css. The page palette is base.css's default --site-* set. */
.home{--home-yellow:#FFCB45}

/* ---------- Hero: centred, one column ---------- */
.home-hero{padding-block:clamp(3.5rem,2rem + 5.4vw,7.5rem) clamp(3rem,1.5rem + 4.4vw,6rem)}
.home-hero__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.home-hero__icons{display:flex}
.home-hero__icons img{width:56px;height:56px;border-radius:var(--m-r-icon);box-shadow:0 0 0 3px var(--site-canvas),0 10px 24px -12px rgb(0 0 0 / .35)}
.home-hero__icons img + img{margin-inline-start:-10px}
.home-hero__title{font-size:var(--m-t-display);font-weight:700;letter-spacing:-.045em;line-height:.96;max-width:11em;text-wrap:balance}
/* "completely." always takes its own line, centred under the rest */
.home-hl{position:relative;display:table;margin-inline:auto;max-width:100%;overflow-wrap:anywhere}
.home-hl::after{content:"";position:absolute;left:.03em;right:.08em;bottom:-.1em;height:.075em;border-radius:999px;background:var(--home-yellow);transform-origin:0 50%}
.home-hero__lead{max-width:34ch;margin-inline:auto;font-size:clamp(1.125rem,1rem + .45vw,1.375rem)}
@media (min-width:720px){.home-hero__icons img{width:72px;height:72px}}

/* ---------- App cards ---------- */
.home-apps{padding-bottom:0}
.home-apps__list{display:grid;gap:clamp(1.5rem,1rem + 1.6vw,2rem)}
.home-card{--card-r:28px;position:relative;isolation:isolate;overflow:clip;border-radius:var(--card-r);
  background:var(--card-bg);color:var(--card-ink);box-shadow:var(--card-ring,none);scroll-margin-top:4px}
.home-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--card-texture);opacity:.7;transition:opacity .4s var(--m-ease-out);
  -webkit-mask-image:var(--card-texture-mask,none);mask-image:var(--card-texture-mask,none)}
.home-card__text{display:flex;flex-direction:column;padding:28px 24px 0}
.home-card__head{display:flex;align-items:center;gap:14px}
.home-card__icon{width:56px;height:56px;border-radius:var(--m-r-icon);flex:none;box-shadow:0 6px 16px -6px rgb(0 0 0 / .35)}
.home-card__name{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.home-card__link{color:inherit;text-decoration:none}
.home-card__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--card-r)}
.home-card__link:focus-visible{outline:none}
.home-card__link:focus-visible::after{outline:3px solid var(--card-focus);outline-offset:-6px}
.home-card__line{margin-top:24px;font-size:clamp(2rem,1.2rem + 2.4vw,3.25rem);font-weight:var(--card-line-w,700);letter-spacing:-.035em;line-height:1.04;text-wrap:balance;max-width:14em}
.home-card__row{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.home-card__row a{position:relative;z-index:2}
.home-card :focus-visible{outline-color:var(--card-focus)}
.home-card__badge{--m-badge-h:48px}
.home-card__row > .m-badges,.home-card__row > .m-badge{margin-inline-start:-12px}
@media (max-width:719.98px){.home-card__row > .m-badges,.home-card__row > .m-badge{margin-inline-start:-11px}}
.home-card__more{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--card-ink-2)}
.home-card__more svg{width:18px;height:18px;transition:translate .3s var(--m-ease-out)}
.home-card__stage{position:relative;height:var(--stage-h,420px);margin-top:28px;container:stage / inline-size}
.home-card__stage > *{position:absolute}
.home-card__stage .m-device{transition:transform .45s var(--m-ease-out)}
@media (max-width:719.98px){.home-card__badge{--m-badge-h:44px}}
@media (hover:hover) and (pointer:fine){
  .m-bar .m-glyph__on{transition:fill .3s}
  .home:has(.home-card--ductline:hover) .m-bar .m-glyph__on{fill:#0E8A9C}
  .home:has(.home-card--notaula:hover) .m-bar .m-glyph__on{fill:#334F61}
  .home:has(.home-card--hedi:hover) .m-bar .m-glyph__on{fill:#F6C445}
  .home-card:hover::before{opacity:1}
  .home-card:hover .home-card__more{color:var(--card-ink)}
  .home-card:hover .home-card__more svg{translate:4px 0}
  .home-card:hover .home-card__stage .m-device{transform:translateY(-10px)}
}
@media (min-width:720px){
  .home-card{--card-r:32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
  .home-card__text{padding:44px 0 44px 44px;justify-content:center}
  .home-card__stage{height:auto;min-height:560px;margin-top:0}
}
@media (min-width:1024px){
  .home-card{--card-r:40px;grid-template-columns:minmax(0,30rem) minmax(0,1fr);column-gap:40px;min-height:600px}
  .home-card__text{padding:64px 0 64px 64px}
  .home-card__icon{width:64px;height:64px}
  .home-card__name{font-size:22px;font-weight:600}
  .home-card__row{margin-top:40px}
  .home-card__stage{min-height:600px}
}

.home-nw{white-space:nowrap}

/* card themes: each app's own colours (source: that app's spec) */
.home-card--ductline{--card-bg:radial-gradient(ellipse 80% 75% at 72% 42%,#0A4F5E 0%,#043644 55%,#022B37 100%);
  --card-ink:#FFFFFF;--card-ink-2:rgb(255 255 255 / .8);--card-ink-3:rgb(255 255 255 / .8);--card-focus:#FFFFFF;
  --card-texture:linear-gradient(rgb(255 255 255 / .085) 1px,transparent 1px) -1px -1px / 120px 120px,linear-gradient(90deg,rgb(255 255 255 / .085) 1px,transparent 1px) -1px -1px / 120px 120px,linear-gradient(rgb(255 255 255 / .035) 1px,transparent 1px) -1px -1px / 24px 24px,linear-gradient(90deg,rgb(255 255 255 / .035) 1px,transparent 1px) -1px -1px / 24px 24px}
.home-card--notaula{--card-bg:#EEF3F7;--card-ink:#13202A;--card-ink-2:#4C5F6D;--card-ink-3:#566874;--card-focus:#334F61;--card-line-w:800;
  --card-ring:inset 0 0 0 1px rgb(19 32 42 / .08);
  --card-texture:linear-gradient(to right,rgb(19 32 42 / .05) 1px,transparent 1px) 0 0 / 48px 48px,linear-gradient(to bottom,rgb(19 32 42 / .05) 1px,transparent 1px) 0 0 / 48px 48px;
  --card-texture-mask:radial-gradient(ellipse 80% 75% at 72% 35%,#000 30%,transparent 80%)}
.home-card--hedi{--card-bg:#1E2A5A;--card-ink:#FFFFFF;--card-ink-2:#C9CFE6;--card-ink-3:#C9CFE6;--card-focus:#F6C445;--card-dot:#F6C445;
  --card-texture:radial-gradient(rgb(255 255 255 / .07) 1.6px,transparent 1.8px) 0 0 / 36px 36px}
@media (prefers-color-scheme:dark) and (hover:hover) and (pointer:fine){
  .home:has(.home-card--ductline:hover) .m-bar .m-glyph__on{fill:#41ABBD}
  .home:has(.home-card--notaula:hover) .m-bar .m-glyph__on{fill:#7FA8EE}
}
@media (prefers-color-scheme:dark){
  .home-card--ductline{--card-bg:radial-gradient(ellipse 80% 75% at 72% 42%,#083F4B 0%,#03303C 55%,#01202A 100%);--card-ring:inset 0 0 0 1px rgb(255 255 255 / .06)}
  .home-card--notaula{--card-bg:#13202A;--card-ink:#F7FAFC;--card-ink-2:#B7C6D0;--card-ink-3:#8FA7B6;--card-focus:#FFCC4D;--card-ring:inset 0 0 0 1px rgb(255 255 255 / .06);
    --card-texture:linear-gradient(to right,rgb(247 250 252 / .035) 1px,transparent 1px) 0 0 / 48px 48px,linear-gradient(to bottom,rgb(247 250 252 / .035) 1px,transparent 1px) 0 0 / 48px 48px}
  .home-card--hedi{--card-bg:#161A2E;--card-ink:#F2F3F7;--card-ink-2:#A9ADBD;--card-ink-3:#A9ADBD;--card-ring:inset 0 0 0 1px rgb(255 255 255 / .06)}
}

/* Ductline stage: the phone on the blueprint, the answer marked in yellow */
.home-dl__phone{--m-dev-w:216px;--m-dev-bezel:1.6cqw;--m-dev-r:15.5cqw;--m-dev-screen-r:13.9cqw;--m-dev-ratio:1100 / 2108;
  --m-dev-island-w:28.6cqw;--m-dev-island-h:8.4cqw;--m-dev-island-top:4.1cqw;--m-dev-color:#15191C;--m-dev-edge:#3A4247;
  --m-dev-shadow:0 30px 60px -18px rgb(0 0 0 / .45);left:50%;top:32px;translate:-50% 0}
.home-dl__annot{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* the motif's trigger: a box over the ring and the 14.3 line, so it plays only when they are on screen */
.home-dl__mark{position:absolute;left:5%;width:90%;top:calc(1600 / 2108 * 100%);height:calc(280 / 2108 * 100%);pointer-events:none}
.home-dl__line,.home-dl__case{transform-box:fill-box;transform-origin:50% 50%}
/* ≥ 720 the cut phone is anchored to the card's bottom edge, so the card's height (set by the text) never leaves a
   false bottom; the overhang is larger than the 10 px hover lift */
@media (min-width:720px){.home-card--ductline{--stage-h:auto}.home-dl__phone{--m-dev-w:260px;top:auto;bottom:-32px}}
@media (min-width:1024px){.home-dl__phone{--m-dev-w:300px;bottom:-28px}}

/* Notaula stage: the Mac gradebook with the iPhone in front; the yellow cell on "grade." */
.home-na__mac{--m-dev-w:460px;left:24px;top:36px}
.home-na__phone{--m-dev-w:164px;--m-dev-bezel:2.2cqw;--m-dev-r:16.5cqw;--m-dev-screen-r:14.3cqw;--m-dev-ratio:540 / 1174;
  --m-dev-island-w:30.6cqw;--m-dev-island-h:9cqw;--m-dev-island-top:5cqw;--m-dev-color:#0F141A;right:20px;top:112px}
.home-na__cell{position:relative;display:inline-block;isolation:isolate;padding:0 .92em 0 .08em;color:#13202A}
.home-na__cell::before{content:"";position:absolute;inset:.06em 0 .02em 0;border-radius:.1em;background:#FFCC4D;z-index:-1;transform-origin:left}
.home-na__tick{position:absolute;right:.16em;top:50%;translate:0 -46%;width:.6em;height:.48em;overflow:visible}
@media (min-width:720px){.home-na__mac{--m-dev-w:600px;left:0;top:64px}.home-na__phone{--m-dev-w:176px;right:28px;top:220px}}
@media (min-width:1024px){.home-na__mac{--m-dev-w:880px;left:32px;top:72px}.home-na__phone{--m-dev-w:210px;right:56px;top:216px}}

/* Hedi stage: the answered question, and Hedi waving */
.home-hd__flag{position:absolute;inset:0 0 auto;height:6px;display:grid;z-index:0;pointer-events:none}
.home-hd__flag i{display:block;height:2px;transform-origin:0 50%}
.home-hd__flag i:nth-child(1){background:#141414}
.home-hd__flag i:nth-child(2){background:#DD0000}
.home-hd__flag i:nth-child(3){background:#FFCE00}
.home-hd__kw{display:inline-block;background:linear-gradient(#4A3B0E,#4A3B0E) no-repeat 0 100% / 100% 52%;
  text-decoration:underline dashed #F6C445;text-decoration-thickness:.04em;text-underline-offset:.1em;text-decoration-skip-ink:none}
.home-card--hedi{--stage-h:380px}
.home-hd__phone{--m-dev-w:224px;--m-dev-ratio:1320 / 2100;left:24px;bottom:-32px}
.home-hd__host{right:8px;bottom:-4px;display:grid;justify-items:end}
/* the motif's trigger: a box over Hedi's body, inside the card's clip */
.home-hd__mark{position:absolute;right:16px;bottom:12px;width:96px;height:96px;pointer-events:none}
.home-hd__hedi{width:128px;height:128px;transform-origin:50% 96.6%}
@media (min-width:720px){.home-card--hedi{--stage-h:auto}.home-hd__phone{--m-dev-w:min(280px,100cqw - 24px);left:0;bottom:-36px}.home-hd__hedi{width:132px;height:132px}}
/* ≥ 1024 the arrangement follows the stage's own width, so Hedi never lands on the phone's screen */
@media (min-width:1024px){
  .home-hd__phone{--m-dev-w:330px;left:48px;bottom:-24px}.home-hd__hedi{width:176px;height:176px}.home-hd__host{right:48px}
  .home-hd__mark{width:132px;height:132px;right:22px}
  @container stage (max-width:639.98px){
    .home-hd__phone{--m-dev-w:min(330px,100cqw - 100px);left:16px}
    .home-hd__host{right:8px}.home-hd__hedi{width:132px;height:132px}
    .home-hd__mark{width:96px;height:96px;right:16px}
  }
}

/* ---------- Closing line ---------- */
.home-close{padding-block:clamp(4.5rem,3.5rem + 3vw,6rem)}
.home-close__line{text-align:center;font-size:clamp(1.25rem,1.1rem + .4vw,1.5rem);line-height:1.4;font-weight:500;letter-spacing:-.01em;color:var(--site-ink-2);text-wrap:balance}

/* ---------- Footer: one quiet row (kit.css has the base .m-foot rules) ---------- */
.m-foot{border-top:1px solid var(--site-line)}
.m-foot__nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.m-foot__nav a.m-foot__app{display:inline-flex;align-items:center;gap:8px}
.m-foot__app img{width:20px;height:20px;border-radius:22%}

/* ---------- Motion (all inside no-preference; hidden states need html.js) ---------- */
@media (prefers-reduced-motion:no-preference){
  .home-hero__in > *{animation:home-rise .5s var(--m-ease-out) both}
  .home-hero__in > :nth-child(2){animation-delay:80ms}
  .home-hero__in > :nth-child(3){animation-delay:160ms}
  .home-hl::after{animation:home-draw .55s var(--m-ease-out) .35s both}

  @supports (animation-timeline:view()){
    .home-card__stage{animation:home-arrive linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  }

  /* The triggers: the Ductline marker over the 14.3 line and the Hedi marker over Hedi (data-m-reveal="1", so they
     fire only when fully on screen, even on short viewports), Notaula's stage (data-m-reveal="0.95"), and the
     Notaula and Hedi lines (data-m-reveal="0.9"). Hidden states apply at once; the transitions belong to the .is-in state. */

  /* Ductline: the answer line springs out, the ring fades in */
  html.js .home-dl__phone:not(:has(.home-dl__mark.is-in)) :is(.home-dl__line,.home-dl__case){scale:0 1}
  html.js .home-dl__phone:not(:has(.home-dl__mark.is-in)) .home-dl__ring{opacity:0}
  .home-dl__phone:has(.home-dl__mark.is-in) :is(.home-dl__line,.home-dl__case){transition:scale .45s var(--m-ease-back) .15s}
  .home-dl__phone:has(.home-dl__mark.is-in) .home-dl__ring{transition:opacity .3s ease-out .5s}

  /* Notaula: the yellow cell wipes in behind "grade." (light only), the tick draws, the iPhone rises */
  html.js .home-card--notaula .home-card__line:not(.is-in) .home-na__tick path{stroke-dasharray:1;stroke-dashoffset:1}
  html.js .home-card--notaula .home-card__stage:not(.is-in) .home-na__phone{translate:0 32px}
  .home-card__line.is-in .home-na__cell::before{transition:scale .38s var(--m-ease-out) .1s}
  .home-card__line.is-in .home-na__tick path{stroke-dasharray:1;transition:stroke-dashoffset .26s var(--m-ease-draw) .5s}
  .home-card__stage.is-in .home-na__phone{transition:translate .7s var(--m-ease-out) .1s,transform .45s var(--m-ease-out)}

  /* Hedi: the flag rule draws, the key words light up, Hedi pops up */
  html.js .home-card--hedi:has(.home-card__line:not(.is-in)) .home-hd__flag i{scale:0 1}
  html.js .home-card--hedi .home-card__line:not(.is-in) .home-hd__kw{background-size:0% 52%}
  html.js .home-hd__host:not(:has(.home-hd__mark.is-in)) .home-hd__hedi{scale:.6;opacity:0}
  .home-card--hedi:has(.home-card__line.is-in) .home-hd__flag i{transition:scale .7s var(--m-ease-draw)}
  .home-card--hedi:has(.home-card__line.is-in) .home-hd__flag i:nth-child(2){transition-delay:40ms}
  .home-card--hedi:has(.home-card__line.is-in) .home-hd__flag i:nth-child(3){transition-delay:80ms}
  .home-card__line.is-in .home-hd__kw{transition:background-size .38s cubic-bezier(.33,1,.68,1) .2s}
  .home-hd__host:has(.home-hd__mark.is-in) .home-hd__hedi{transition:scale .45s var(--m-ease-back) .2s,opacity .2s linear .2s}
}
@media (prefers-reduced-motion:no-preference) and (prefers-color-scheme:light){
  html.js .home-card--notaula .home-card__line:not(.is-in) .home-na__cell::before{scale:0 1}
}
@keyframes home-rise{from{opacity:0;translate:0 12px}}
@keyframes home-draw{from{scale:0 1}}
@keyframes home-arrive{from{translate:0 56px}}

/* ---------- 404 ---------- */
.home-404{display:flex;flex-direction:column;align-items:center;text-align:center}
.home-404__list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;margin-top:40px}
.home-404__list a{display:inline-flex;align-items:center;gap:12px;min-height:56px;font-size:17px;font-weight:600;color:var(--site-ink);text-decoration:none}
.home-404__list a:hover{text-decoration:underline;text-underline-offset:3px}
.home-404__list img{width:48px;height:48px;border-radius:var(--m-r-icon)}

/* ---------- Support (/contact) ---------- */
.home-contact{display:flex;flex-direction:column;align-items:center;text-align:center}
.home-contact__lead{max-width:30rem;margin-top:16px;font-size:19px;line-height:1.45;color:var(--site-ink-2);text-wrap:balance}
.home-contact__card{margin-top:40px;padding:28px 40px;border-radius:20px;background:var(--site-surface,#fff);box-shadow:0 1px 2px rgb(0 0 0 / .06),0 12px 32px rgb(0 0 0 / .06)}
.home-contact__name{font-size:17px;font-weight:600;color:var(--site-ink)}
.home-contact__mail{margin-top:6px;font-size:clamp(20px,1rem + 1.2vw,26px);font-weight:700;letter-spacing:-.01em}
.home-contact__mail a{display:inline-flex;align-items:center;min-height:44px;color:var(--site-ink);text-decoration:underline;text-decoration-color:var(--site-highlight);text-decoration-thickness:3px;text-underline-offset:6px}
.home-contact__label{margin-top:56px;font-size:14px;font-weight:600;color:var(--site-ink-3)}
.home-contact .home-404__list{margin-top:12px}