/* Module briefings recreated in page, and the animated screen clips. */

/* ---- Briefing shell ---- */
.brief { gap: 18px; }
.brief-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.brief-head .fmark { width: 52px; height: 52px; border-radius: 17px; background: var(--tile); display: grid; place-items: center; }
.brief-head .fmark svg { width: 27px; height: 27px; }
.brief-head h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 400; letter-spacing: -0.01em; }
.brief-head .eyebrow { display: block; margin-bottom: 4px; }
.brief-head .tools { gap: 8px; }
.brief-lede { color: var(--muted); max-width: 78ch; font-size: 15px; }
.brief-lede b { color: var(--ink); font-weight: 650; }

.toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--card-line); background: var(--ghost); color: var(--muted);
  font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
}
.toggle svg { width: 13px; height: 13px; }
.toggle .chev { transform: rotate(180deg); }
.toggle[aria-expanded="false"] .chev { transform: rotate(0deg); }
.toggle[aria-expanded="false"] .lbl-hide { display: none; }
.toggle[aria-expanded="true"] .lbl-show { display: none; }

.panel { display: grid; grid-template-rows: 1fr; }
.panel[data-open="false"] { grid-template-rows: 0fr; }
.panel > .panel-in { overflow: hidden; min-height: 0; visibility: visible; transition: visibility 0s; }
.panel[data-open="false"] > .panel-in { visibility: hidden; transition: visibility 0s linear 0.42s; }
.panel > .panel-in > .panel-pad { display: grid; gap: 18px; padding-top: 4px; }

/* ---- Briefing pieces ---- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 860px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--tile); border-radius: 20px; padding: 16px; display: grid; gap: 3px; align-content: start; }
.kpi b { font-family: var(--display); font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.kpi.lime { background: var(--accent); }
.kpi.lime b, .kpi.lime span { color: var(--accent-ink); }
.kpi.dark { background: var(--deep); }
.kpi.dark b { color: var(--deep-ink); }
.kpi.dark span { color: var(--deep-muted); }

.splitbar { display: grid; gap: 8px; }
.splitbar .track2 { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--tile); }
.splitbar .track2 i { display: block; height: 100%; }
.splitbar .track2 .a { background: var(--coral); width: 64.4%; }
.splitbar .track2 .b { background: var(--blue); width: 35.6%; }
.splitbar .keys { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.splitbar .keys span { display: inline-flex; align-items: center; gap: 7px; }
.splitbar .keys span::before { content: ""; width: 8px; height: 8px; border-radius: 3px; }
.splitbar .keys .k-a::before { background: var(--coral); }
.splitbar .keys .k-b::before { background: var(--blue); }

.readygrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 980px) { .readygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .readygrid { grid-template-columns: 1fr; } }
.ready { background: var(--tile); border-radius: 20px; padding: 16px; display: grid; gap: 8px; align-content: start; }
.ready .rtop { display: flex; align-items: center; gap: 9px; }
.ready .rtop .ic { width: 32px; height: 32px; border-radius: 11px; background: var(--card); display: grid; place-items: center; flex: none; }
.ready .rtop .ic svg { width: 17px; height: 17px; }
.ready h4 { font-size: 15.5px; }
.ready p { font-size: 12.8px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--card); color: var(--muted); }

.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .feats { grid-template-columns: 1fr; } }
.feat { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 13px; background: var(--tile); border-radius: 20px; padding: 16px; align-items: start; }
.feat .n { width: 44px; height: 44px; border-radius: 14px; background: var(--active-bg); color: var(--active-ink); display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 15px; }
.feat h4 { font-size: 16px; margin-bottom: 3px; }
.feat p { font-size: 13px; color: var(--muted); }

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.flow span { background: var(--tile); color: var(--ink); border-radius: 999px; padding: 6px 12px; }
.flow i { font-style: normal; color: var(--faint); }

.numsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: ns; }
.numsteps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px; font-size: 13.4px; color: var(--muted); align-items: start; }
.numsteps li::before {
  counter-increment: ns; content: counter(ns);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tile); color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 12px;
}
.numsteps b { color: var(--ink); font-weight: 650; }

.asks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .asks { grid-template-columns: 1fr; } }
.ask { background: var(--tile); border-radius: 18px; padding: 14px 16px; display: grid; gap: 4px; }
.ask h4 { font-size: 14.5px; }
.ask p { font-size: 12.8px; color: var(--muted); }

.privacy {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start;
  background: var(--ghost); border-radius: 16px; padding: 12px 14px; font-size: 12.5px; color: var(--muted);
}
.privacy svg { width: 18px; height: 18px; margin-top: 1px; color: var(--faint); }

/* ---- Clips ---- */
.clipgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.clipgrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clipgrid.mix { grid-template-columns: 1.85fr 1fr; }
.clipgrid.one { grid-template-columns: 1fr; }
@media (max-width: 980px) { .clipgrid, .clipgrid.two, .clipgrid.mix { grid-template-columns: 1fr; } }
.clip { margin: 0; display: grid; gap: 9px; }
.clip .frame {
  border-radius: 20px; overflow: hidden; background: var(--tile);
  border: 1px solid var(--card-line); position: relative;
}
.clip svg { display: block; width: 100%; height: auto; }
.clip figcaption { font-size: 12.4px; color: var(--muted); display: grid; gap: 2px; }
.clip figcaption b { color: var(--ink); font-weight: 650; font-size: 13px; }
.livedot {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.livedot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.clip-wide .frame { border-radius: 24px; }
.clip-phone .frame { max-width: 330px; margin-inline: auto; background: none; border: 0; }
.scroll-hint { display: none; }
@media (max-width: 780px) {
  /* A desktop screen shrunk to phone width is unreadable, so let it scroll in its own frame. */
  .clip:not(.clip-phone) .frame { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .clip:not(.clip-phone) .frame svg { min-width: 560px; }
  .clip-wide .frame svg { min-width: 720px; }
  .scroll-hint { display: inline; }
}

/* SVG kit — every colour comes from the page tokens so both themes work */
.k-sea { fill: var(--map-sea, #C9DFE8); }
.k-land { fill: var(--map-land, #F6F3ED); }
.k-panel { fill: var(--card); }
.k-tile { fill: var(--tile); }
.k-dark { fill: var(--deep); }
.k-ink { fill: var(--ink); }
.k-oninv { fill: var(--deep-ink); }
.k-muted { fill: var(--muted); }
.k-faint { fill: var(--faint); }
.k-acc { fill: var(--accent); }
.k-accink { fill: var(--accent-ink); }
.k-coral { fill: var(--coral); }
.k-blue { fill: var(--blue); }
.k-warn { fill: var(--warn); }
.k-white { fill: #FFFFFF; }
.k-stroke { fill: none; stroke: var(--line); stroke-width: 1.2; }
.k-stroke2 { fill: none; stroke: var(--card-line); stroke-width: 1; }
.k-row-a { fill: var(--coral-bg); }
.k-row-b { fill: var(--blue-bg); }
.k-t { font-family: var(--body); fill: var(--ink); }
.k-t.sm { font-size: 11px; }
.k-t.xs { font-size: 9.5px; }
.k-t.lg { font-family: var(--display); font-size: 22px; font-weight: 500; }
.k-t.hd { font-family: var(--display); font-size: 15px; font-weight: 600; }
.k-cap { font-family: var(--body); font-size: 8.5px; font-weight: 700; letter-spacing: 0.07em; fill: var(--muted); }

/* ---- Clip motion ---- */
@keyframes pmc-pop { 0%, 4% { opacity: 0; transform: scale(0.82); } 12%, 100% { opacity: 1; transform: scale(1); } }
@keyframes pmc-row { 0%, 6% { opacity: 0; transform: translateX(-10px); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes pmc-drop { 0%, 6% { opacity: 0; transform: translateY(-16px) scale(0.6); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes pmc-fade { 0%, 8% { opacity: 0; } 20%, 100% { opacity: 1; } }
@keyframes pmc-tick { 0%, 6% { opacity: 0; transform: scale(0.4); } 14% { transform: scale(1.18); } 20%, 100% { opacity: 1; transform: scale(1); } }
@keyframes pmc-grow { 0%, 10% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
@keyframes pmc-pill3 {
  0%, 22% { transform: translateX(0); }
  30%, 52% { transform: translateX(272px); }
  60%, 80% { transform: translateX(544px); }
  90%, 100% { transform: translateX(0); }
}
@keyframes pmc-lab1 { 0%, 24%, 92%, 100% { fill: var(--accent-ink); } 30%, 86% { fill: var(--muted); } }
@keyframes pmc-lab2 { 0%, 26%, 56%, 100% { fill: var(--muted); } 32%, 50% { fill: var(--accent-ink); } }
@keyframes pmc-lab3 { 0%, 56%, 86%, 100% { fill: var(--muted); } 62%, 80% { fill: var(--accent-ink); } }
@keyframes pmc-sweep { 0%, 8% { opacity: 0; transform: translateY(0); } 18% { opacity: 1; } 78% { opacity: 1; transform: translateY(56px); } 88%, 100% { opacity: 0; transform: translateY(56px); } }
@keyframes pmc-views6 {
  0%, 12% { transform: translateX(0); }
  16%, 28% { transform: translateX(138px); }
  32%, 44% { transform: translateX(276px); }
  48%, 60% { transform: translateX(414px); }
  64%, 76% { transform: translateX(552px); }
  80%, 92% { transform: translateX(690px); }
  96%, 100% { transform: translateX(0); }
}
@keyframes pmc-nav3 {
  0%, 26% { transform: translateX(0); }
  34%, 58% { transform: translateX(88px); }
  66%, 90% { transform: translateX(176px); }
  96%, 100% { transform: translateX(0); }
}
@keyframes pmc-banner { 0%, 76% { opacity: 0; transform: translateY(-10px); } 86%, 100% { opacity: 1; transform: none; } }
@keyframes pmc-link { 0%, 8% { stroke-dashoffset: 26; } 18%, 100% { stroke-dashoffset: 0; } }

.clip svg [class*="a-"] { transform-box: fill-box; transform-origin: center; }
.a-grow { transform-box: fill-box; transform-origin: left center; }

@media (prefers-reduced-motion: no-preference) {
  .a-pop { animation: pmc-pop 8s var(--d, 0s) infinite both; }
  .a-row { animation: pmc-row 8s var(--d, 0s) infinite both; }
  .a-drop { animation: pmc-drop 8s var(--d, 0s) infinite both; }
  .a-fade { animation: pmc-fade 8s var(--d, 0s) infinite both; }
  .a-tick { animation: pmc-tick 9s var(--d, 0s) infinite both; }
  .a-grow { animation: pmc-grow 8s var(--d, 0s) infinite both; }
  .a-link { animation: pmc-link 9s var(--d, 0s) infinite both; }
  .a-pill3 { animation: pmc-pill3 8s infinite both; }
  .a-lab1 { animation: pmc-lab1 8s infinite both; }
  .a-lab2 { animation: pmc-lab2 8s infinite both; }
  .a-lab3 { animation: pmc-lab3 8s infinite both; }
  .a-sweep { animation: pmc-sweep 8s infinite both; }
  .a-views6 { animation: pmc-views6 13s infinite both; }
  .a-nav3 { animation: pmc-nav3 8s infinite both; }
  .a-banner { animation: pmc-banner 9s infinite both; }
  .clips-paused .clip svg * { animation-play-state: paused !important; }
}

/* ---- Page motion ---- */
body, .shell, .card, .tile, .subtile, .envtile, .avatar, .st, .seg, .segnav, .step, .ncard,
.split > div, .datechip, .iconbtn, .topbar, .kpi, .ready, .feat, .ask, .toggle, .clip .frame {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

@keyframes pm-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pm-row { from { opacity: 0; transform: translateY(7px); } }
@keyframes pm-draw { from { stroke-dashoffset: 1400; } }
@keyframes pm-ring { from { stroke-dashoffset: 326.7; } }
@keyframes pm-bar { from { width: 0; } }
@keyframes pm-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .panel { transition: grid-template-rows 0.42s cubic-bezier(0.22, 0.9, 0.3, 1); }
  .toggle .chev { transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1); }

  .shell > *, #overview > .card { animation: pm-rise 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) backwards; }
  #overview { animation: none; }
  .shell > *:nth-child(2) { animation-delay: 0.04s; }
  .shell > *:nth-child(3) { animation-delay: 0.08s; }
  .shell > *:nth-child(4) { animation-delay: 0.12s; }
  .shell > *:nth-child(5) { animation-delay: 0.16s; }
  .shell > *:nth-child(6) { animation-delay: 0.20s; }
  .shell > *:nth-child(7) { animation-delay: 0.24s; }
  .shell > *:nth-child(8) { animation-delay: 0.28s; }
  .shell > *:nth-child(9) { animation-delay: 0.32s; }
  .shell > *:nth-child(10) { animation-delay: 0.36s; }
  .shell > *:nth-child(11) { animation-delay: 0.40s; }
  .shell > *:nth-child(12) { animation-delay: 0.44s; }
  .shell > *:nth-child(13) { animation-delay: 0.48s; }
  #overview > .card:nth-child(1) { animation-delay: 0.10s; }
  #overview > .card:nth-child(2) { animation-delay: 0.16s; }
  #overview > .card:nth-child(3) { animation-delay: 0.22s; }
  #overview > .card:nth-child(4) { animation-delay: 0.28s; }
  #overview > .card:nth-child(5) { animation-delay: 0.34s; }

  .mrow { animation: pm-row 0.34s ease backwards; }
  .mrow:nth-child(even) { animation-delay: 0.05s; }

  .bar i { animation: pm-bar 0.9s 0.35s cubic-bezier(0.3, 0.9, 0.3, 1) backwards; }
  .ring .prog { animation: pm-ring 1.1s 0.3s cubic-bezier(0.3, 0.9, 0.3, 1) backwards; }
  .c-line { stroke-dasharray: 1400; animation: pm-draw 1.15s 0.2s ease-out backwards; }
  .c-area, .c-dot, .c-tip, .c-tip-text, .c-mark, .c-note { animation: pm-fade 0.5s 1.0s ease backwards; }

  .card, .tile, .step, .ncard, .device, .envtile, .kpi, .ready, .feat, .drow, .subtile, .toggle, .clip .frame {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease,
                transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1), box-shadow 0.3s ease;
  }
  .mrow { transition: background-color 0.25s ease; }
  .avatar { transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1); }
  .segnav a, .seg button { transition: background-color 0.22s ease; }
  .iconbtn { transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1), background-color 0.35s ease, border-color 0.35s ease; }
}

@media (hover: hover) {
  .tile:hover, .step:hover, .device:hover, .envtile:hover, .kpi:hover, .ready:hover, .feat:hover { transform: translateY(-3px); }
  .ncard:hover { transform: translateY(-4px); }
  .clip .frame:hover { transform: translateY(-3px); }
  .toggle:hover { color: var(--ink); }
  .mrow:hover { background: var(--ghost); }
  .mrow:hover .avatar { background: var(--active-bg); color: var(--active-ink); transform: scale(1.07); }
  .segnav a:hover:not(.on) { background: var(--ghost); }
  .seg button:hover:not([aria-pressed="true"]) { color: var(--ink); }
  .iconbtn:hover { transform: rotate(-12deg); }
}

@media print {
  body { background: #fff; padding: 0; }
  .shell { background: none; border: 0; backdrop-filter: none; max-width: none; }
  .topbar, .toggle, .iconbtn { display: none; }
  .panel { grid-template-rows: 1fr !important; }
  .card, .clip .frame { break-inside: avoid; }
}