/* =========================================================
   一人出片 · Jacqueline Marketing — shared design system
   Palette taken from the brand graphics (yellow / royal blue / coral)
   ========================================================= */
:root {
  --yellow: #FFD43B;
  --yellow-soft: #FFE98A;
  --yellow-wash: #FFF6D1;
  --blue: #2F45C5;
  --blue-soft: #E7EAFB;
  --navy: #0E1F5B;
  --coral: #F0553B;
  --coral-soft: #FDE4DE;
  --cream: #FEF3E0;
  --paper: #FFFCF5;
  --ink: #15172B;
  --ink-2: #3D4060;
  --ink-3: #6B6E8A;
  --line: #ECE4D3;
  --white: #FFFFFF;
  --green: #1F9D6B;

  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 1px 0 rgba(14, 31, 91, .04), 0 8px 24px -12px rgba(14, 31, 91, .18);
  --shadow-pop: 4px 4px 0 var(--navy);
  --font: "Noto Sans TC", "Noto Sans CJK TC", -apple-system, BlinkMacSystemFont, "PingFang HK", "Microsoft JhengHei", sans-serif;
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--coral); }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.25; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-weight: 900; }
h2 { font-weight: 900; font-size: clamp(1.6rem, 3.6vw, 2.25rem); }
h3 { font-weight: 800; font-size: 1.2rem; }
h4 { font-weight: 800; font-size: 1.02rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .35em; }
strong { font-weight: 800; color: var(--navy); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section-sm { padding: 48px 0; }
.center { text-align: center; }
.muted { color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Small atoms ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  padding: .3em .85em; border-radius: 999px;
  background: var(--yellow); color: var(--navy);
  margin-bottom: 14px;
}
.eyebrow.blue { background: var(--blue); color: #fff; }
.eyebrow.coral { background: var(--coral); color: #fff; }
.eyebrow.line { background: transparent; border: 2px solid currentColor; color: var(--blue); }

.hl { background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%); padding: 0 .08em; }
.hl-coral { color: var(--coral); }

.section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.section-head p { color: var(--ink-2); font-size: 1.05rem; margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: inherit; font-weight: 800; font-size: 1rem; line-height: 1.2;
  padding: 14px 26px; border-radius: 999px; border: 2px solid var(--navy);
  text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-primary { background: var(--navy); color: #fff; box-shadow: 4px 4px 0 var(--yellow); }
.btn-primary:hover { color: #fff; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--yellow); }
.btn-yellow { background: var(--yellow); color: var(--navy); box-shadow: var(--shadow-pop); }
.btn-yellow:hover { color: var(--navy); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--navy); }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn-sm { padding: 9px 16px; font-size: .9rem; }

.chip {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .82rem; font-weight: 700; line-height: 1.3;
  padding: .35em .8em; border-radius: 999px;
  background: var(--white); border: 1.5px solid var(--line); color: var(--ink-2);
}
.chip svg { width: 1em; height: 1em; }

.card {
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
}
.card-pop { border: 2px solid var(--navy); box-shadow: var(--shadow-pop); }

.dots { background-image: radial-gradient(var(--navy) 1.2px, transparent 1.3px); background-size: 12px 12px; opacity: .14; }

.icon { width: 24px; height: 24px; flex-shrink: 0; }

/* ---------- Navigation ---------- */
.progress-bar { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: var(--coral); z-index: 1001; transition: width .1s linear; }

.site-nav {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255, 252, 245, .92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1.5px solid var(--line);
}
.site-nav .wrap { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font-weight: 900; font-size: 1.15rem; letter-spacing: .02em; }
.brand:hover { color: var(--navy); }
.brand-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--yellow); border: 2px solid var(--navy); display: grid; place-items: center; font-size: .95rem; box-shadow: 2px 2px 0 var(--navy); }
.brand small { display: block; font-size: .66rem; font-weight: 700; color: var(--ink-3); letter-spacing: .06em; line-height: 1; margin-top: 2px; }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; margin: 0; }
.nav-links > li > a, .nav-drop > summary {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; color: var(--navy); text-decoration: none; cursor: pointer; list-style: none; user-select: none;
}
.nav-links > li > a:hover, .nav-drop > summary:hover, .nav-drop[open] > summary { background: var(--yellow-wash); color: var(--navy); }
.nav-links > li > a[aria-current="page"] { background: var(--yellow); }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary svg { width: 14px; height: 14px; transition: transform .2s; }
.nav-drop[open] > summary svg { transform: rotate(180deg); }
.nav-panel {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 300px;
  background: var(--white); border: 2px solid var(--navy); border-radius: 18px; box-shadow: var(--shadow-pop);
  padding: 10px;
}
.nav-panel-label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: var(--ink-3); padding: 8px 12px 4px; }
.nav-panel a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; line-height: 1.35; }
.nav-panel a:hover { background: var(--yellow-wash); color: var(--navy); }
.nav-panel a .n { width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: .75rem; font-weight: 800; flex-shrink: 0; }
.nav-panel a .d { width: 24px; height: 24px; border-radius: 50%; background: var(--yellow-wash); display: grid; place-items: center; flex-shrink: 0; }
.nav-panel a .d::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.nav-panel hr { border: 0; border-top: 1.5px solid var(--line); margin: 6px 4px; }
.nav-cta { margin-left: 6px; }

.nav-burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--navy); background: var(--yellow); cursor: pointer; align-items: center; justify-content: center; }
.nav-burger svg { width: 22px; height: 22px; }

.mobile-menu { display: none; }
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
  .mobile-menu {
    position: fixed; inset: var(--nav-h) 0 0 0; z-index: 999; background: var(--paper);
    overflow-y: auto; padding: 16px 20px 40px; display: none; border-top: 1.5px solid var(--line);
  }
  .mobile-menu.open { display: block; }
  .mobile-menu h4 { font-size: .75rem; letter-spacing: .12em; color: var(--ink-3); margin: 22px 0 8px; }
  .mobile-menu a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--white); border: 1.5px solid var(--line); margin-bottom: 8px; text-decoration: none; color: var(--navy); font-weight: 700; }
  .mobile-menu a .n { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: .78rem; flex-shrink: 0; }
  body.menu-open { overflow: hidden; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.78); padding: 64px 0 32px; margin-top: 40px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--yellow); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h4 { color: var(--yellow); font-size: .8rem; letter-spacing: .12em; margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; font-size: .95rem; }
.footer-brand .brand { color: #fff; }
.footer-brand p { font-size: .95rem; margin-top: 14px; max-width: 300px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 40px; padding-top: 20px; font-size: .85rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ---------- Pager (prev / next lesson) ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 56px 0 0; }
.pager a { display: block; padding: 20px 22px; border-radius: var(--radius); border: 2px solid var(--navy); background: var(--white); text-decoration: none; color: var(--navy); transition: transform .15s, box-shadow .15s; }
.pager a:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-pop); color: var(--navy); }
.pager .lbl { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: var(--ink-3); }
.pager .ttl { display: block; font-weight: 900; font-size: 1.1rem; margin-top: 4px; }
.pager .next { text-align: right; background: var(--yellow); }
.pager .next:only-child { grid-column: 2; }
@media (max-width: 600px) { .pager { grid-template-columns: 1fr; } .pager .next:only-child { grid-column: 1; } }

/* ---------- Newsletter / follow block ---------- */
.signup { background: var(--blue); color: #fff; border-radius: 28px; padding: 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; position: relative; overflow: hidden; }
.signup h2 { color: #fff; }
.signup p { color: rgba(255,255,255,.85); margin: 0; }
.signup form { display: flex; gap: 10px; flex-wrap: wrap; }
.signup input[type=email] { flex: 1 1 200px; font: inherit; padding: 14px 18px; border-radius: 999px; border: 2px solid var(--navy); min-width: 0; }
.signup .note { font-size: .82rem; color: rgba(255,255,255,.7); margin-top: 10px; }
.signup .follow { display: inline-flex; align-items: center; gap: 8px; color: var(--yellow); font-weight: 800; text-decoration: none; margin-top: 14px; }
@media (max-width: 760px) { .signup { grid-template-columns: 1fr; padding: 28px; } }

/* =========================================================
   HOME
   ========================================================= */
.hero { position: relative; padding: 56px 0 40px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); line-height: 1.12; margin-bottom: 20px; }
.hero h1 .small { display: block; font-size: .5em; color: var(--coral); letter-spacing: .04em; margin-bottom: 8px; }
.hero .lead { font-size: 1.15rem; color: var(--ink-2); margin-bottom: 8px; }
.hero .sub { color: var(--ink-3); margin-bottom: 28px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-art { position: relative; }
.hero-art img { border-radius: 28px; border: 2.5px solid var(--navy); box-shadow: 8px 8px 0 var(--navy); }
.hero-art .sticker {
  position: absolute; background: var(--white); border: 2px solid var(--navy); border-radius: 16px;
  padding: 10px 14px; font-weight: 800; color: var(--navy); font-size: .92rem; line-height: 1.35; box-shadow: 3px 3px 0 var(--navy);
}
.hero-art .sticker.s1 { left: -18px; bottom: 28px; transform: rotate(-4deg); }
.hero-art .sticker.s2 { right: -12px; top: 20px; background: var(--coral); color: #fff; transform: rotate(4deg); }
.hero .dots { position: absolute; width: 240px; height: 240px; right: -40px; top: -40px; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-art { max-width: 520px; margin: 0 auto; }
  .hero-art .sticker.s1 { left: -6px; } .hero-art .sticker.s2 { right: -4px; }
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--navy); border-radius: 22px; background: var(--white); box-shadow: var(--shadow-pop); overflow: hidden; }
.stat { padding: 22px 20px; border-right: 1.5px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .num { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 900; color: var(--blue); line-height: 1.05; }
.stat .num small { font-size: .5em; margin-left: 2px; }
.stat .lbl { font-size: .9rem; color: var(--ink-2); font-weight: 600; margin-top: 6px; line-height: 1.45; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1.5px solid var(--line); } }

/* pain points */
.pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.pain { background: var(--white); border: 1.5px solid var(--line); border-radius: 18px; padding: 18px 18px 18px 54px; position: relative; font-weight: 600; color: var(--ink-2); line-height: 1.55; }
.pain::before { content: ""; position: absolute; left: 18px; top: 20px; width: 22px; height: 22px; border-radius: 50%; background: var(--coral-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0553B' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat; }
.pain.yes::before { background: #DDF4EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F9D6B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; }

/* staircase (why phased) */
.why { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.stairs { display: flex; align-items: flex-end; gap: 12px; height: 300px; }
.stair { flex: 1; border: 2px solid var(--navy); border-radius: 16px 16px 6px 6px; padding: 16px 14px; display: flex; flex-direction: column; justify-content: flex-start; box-shadow: 3px 3px 0 var(--navy); }
.stair .n { font-size: 2rem; font-weight: 900; line-height: 1; }
.stair .txt { display: block; }
.stair .t { display: block; font-weight: 900; margin-top: 8px; line-height: 1.3; }
.stair .s { display: block; font-size: .82rem; margin-top: 6px; line-height: 1.45; }
.stair:nth-child(1) { height: 52%; background: var(--yellow); color: var(--navy); }
.stair:nth-child(2) { height: 76%; background: var(--blue); color: #fff; }
.stair:nth-child(3) { height: 100%; background: var(--navy); color: #fff; }
.stair:nth-child(2) .t, .stair:nth-child(3) .t { color: #fff; }
.why-quote { font-size: 1.35rem; font-weight: 900; color: var(--navy); border-left: 6px solid var(--coral); padding-left: 16px; margin-top: 20px; }
@media (max-width: 860px) { .why { grid-template-columns: 1fr; } .stairs { height: 260px; } }

/* roadmap */
.roadmap { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.roadmap::before { content: ""; position: absolute; left: 6%; right: 6%; top: 38px; border-top: 3px dashed var(--navy); opacity: .35; }
.stop { position: relative; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.stop .pin { width: 76px; height: 76px; border-radius: 50%; background: var(--yellow); border: 2.5px solid var(--navy); display: grid; place-items: center; font-size: 1.9rem; font-weight: 900; color: var(--navy); margin: 0 auto 16px; box-shadow: 3px 3px 0 var(--navy); position: relative; z-index: 1; transition: transform .2s; }
.stop:nth-child(2) .pin { background: var(--coral); color: #fff; }
.stop:nth-child(3) .pin { background: var(--blue); color: #fff; }
.stop:nth-child(4) .pin { background: var(--navy); color: var(--yellow); }
.stop .body { flex: 1; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); transition: border-color .2s, transform .2s; display: flex; flex-direction: column; }
.stop:hover .body { border-color: var(--navy); transform: translateY(-3px); }
.stop:hover .pin { transform: scale(1.06) rotate(-4deg); }
.stop .tag { font-size: .8rem; font-weight: 800; color: var(--coral); letter-spacing: .06em; }
.stop h3 { margin: 4px 0 10px; }
.stop p { font-size: .94rem; color: var(--ink-2); line-height: 1.65; flex: 1; }
.stop .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.stop .go { font-weight: 800; color: var(--blue); font-size: .95rem; }
@media (max-width: 960px) {
  .roadmap { grid-template-columns: 1fr; gap: 16px; }
  .roadmap::before { left: 37px; right: auto; top: 30px; bottom: 30px; border-top: 0; border-left: 3px dashed var(--navy); }
  .stop { flex-direction: row; gap: 16px; align-items: flex-start; }
  .stop .pin { width: 56px; height: 56px; font-size: 1.4rem; margin: 10px 0 0 10px; flex-shrink: 0; }
}

/* feature banner */
.feature { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; background: var(--navy); color: #fff; border-radius: 28px; padding: 36px 40px; position: relative; overflow: hidden; }
.feature h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.feature p { color: rgba(255,255,255,.82); margin: 0; }
.feature .eyebrow { background: var(--coral); color: #fff; }
.feature .dots { position: absolute; right: -30px; bottom: -30px; width: 200px; height: 200px; background-image: radial-gradient(var(--yellow) 1.3px, transparent 1.4px); opacity: .35; }
@media (max-width: 700px) { .feature { grid-template-columns: 1fr; padding: 28px; } }

/* module groups */
.mod-groups { display: grid; gap: 40px; }
.mod-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mod-group-head .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; border: 2px solid var(--navy); flex-shrink: 0; }
.mod-group-head h3 { margin: 0; font-size: 1.3rem; }
.mod-group-head p { margin: 0; color: var(--ink-3); font-size: .92rem; line-height: 1.4; }
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.mod { display: block; text-decoration: none; color: inherit; background: var(--white); border: 1.5px solid var(--line); border-radius: 18px; padding: 20px; transition: border-color .2s, transform .2s, box-shadow .2s; position: relative; }
.mod:hover { border-color: var(--navy); transform: translateY(-3px); box-shadow: var(--shadow-pop); color: inherit; }
.mod .k { font-size: .76rem; font-weight: 800; color: var(--coral); letter-spacing: .06em; }
.mod h4 { margin: 4px 0 6px; font-size: 1.05rem; }
.mod p { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.6; }
.mod .arrow { position: absolute; right: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow-wash); display: grid; place-items: center; transition: background .2s; }
.mod:hover .arrow { background: var(--yellow); }
.mod .arrow svg { width: 15px; height: 15px; }
.mod.new::after { content: "NEW"; position: absolute; right: 56px; top: 22px; font-size: .66rem; font-weight: 900; background: var(--coral); color: #fff; padding: 2px 7px; border-radius: 6px; letter-spacing: .06em; }

/* about */
.about { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.about-photo img { border-radius: 24px; border: 2.5px solid var(--navy); box-shadow: 8px 8px 0 var(--yellow); }
.about-photo .lead { font-size: 1.05rem; color: var(--ink-2); margin-top: 24px; }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; border-left: 3px solid var(--line); }
.tl { position: relative; padding-left: 50px; margin-bottom: 22px; }
.tl .dot { position: absolute; left: 3px; top: 2px; width: 27px; height: 27px; border-radius: 50%; border: 2.5px solid var(--navy); background: var(--yellow); }
.tl:nth-child(2) .dot { background: var(--coral); } .tl:nth-child(3) .dot { background: var(--blue-soft); }
.tl:nth-child(4) .dot { background: var(--cream); } .tl:nth-child(5) .dot { background: var(--blue); } .tl:nth-child(6) .dot { background: var(--navy); }
.tl .when { font-size: .78rem; font-weight: 800; color: var(--coral); letter-spacing: .06em; }
.tl h4 { margin: 2px 0 6px; }
.tl ul { padding-left: 1.1em; margin: 0; font-size: .94rem; color: var(--ink-2); line-height: 1.65; }
.tl li { margin-bottom: .25em; }
.tl .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

.cta-final { background: var(--yellow); border: 2.5px solid var(--navy); border-radius: 32px; padding: 56px 32px; text-align: center; position: relative; overflow: hidden; box-shadow: 8px 8px 0 var(--navy); }
.cta-final h2 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
.cta-final p { font-size: 1.1rem; color: var(--ink-2); margin-bottom: 28px; }

/* =========================================================
   LESSON PAGES (steps etc.)
   ========================================================= */
.lesson-hero { padding: 48px 0 32px; position: relative; overflow: hidden; }
.lesson-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.crumbs { font-size: .85rem; color: var(--ink-3); margin-bottom: 14px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.crumbs a { color: var(--ink-3); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--blue); }
.lesson-hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.12; margin-bottom: 14px; }
.lesson-hero .lead { font-size: 1.15rem; color: var(--ink-2); }
.lesson-hero .facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.lesson-hero .facts .chip { background: var(--white); border-color: var(--navy); color: var(--navy); padding: .5em 1em; font-size: .9rem; }
.lesson-hero .facts .chip b { color: var(--coral); }
.lesson-hero-art img { border-radius: 24px; border: 2.5px solid var(--navy); box-shadow: 8px 8px 0 var(--navy); }
@media (max-width: 860px) { .lesson-hero-grid { grid-template-columns: 1fr; } }

.lesson-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 20px); max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto; }
.toc-title { font-size: .75rem; font-weight: 800; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 10px; }
.toc-progress { font-size: .85rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.toc-meter { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 16px; }
.toc-meter span { display: block; height: 100%; width: 0; background: var(--green); transition: width .3s; }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0; }
.toc a { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-size: .9rem; font-weight: 600; line-height: 1.35; }
.toc a:hover { background: var(--yellow-wash); color: var(--navy); }
.toc a .n { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: .72rem; font-weight: 800; flex-shrink: 0; background: var(--white); }
.toc a.active { background: var(--yellow); color: var(--navy); }
.toc a.active .n { border-color: var(--navy); }
.toc a.done .n { background: var(--green); border-color: var(--green); color: transparent; position: relative; }
.toc a.done .n::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
.toc .phase-lbl { font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: var(--coral); margin: 14px 0 4px 10px; }

.toc-mobile { display: none; }
@media (max-width: 960px) {
  .lesson-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
  .toc-mobile { display: block; position: sticky; top: var(--nav-h); z-index: 50; background: rgba(255,252,245,.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1.5px solid var(--line); margin: 0 -20px 24px; padding: 10px 20px; }
  .toc-mobile .row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .toc-mobile .row::-webkit-scrollbar { display: none; }
  .toc-mobile a { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; text-decoration: none; color: var(--navy); background: var(--white); border: 2px solid var(--line); }
  .toc-mobile a.active { background: var(--yellow); border-color: var(--navy); }
  .toc-mobile a.done { background: var(--green); border-color: var(--green); color: #fff; }
}

/* phase overview strip */
.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.phase { background: var(--cream); border: 2px solid var(--navy); border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.phase:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); color: inherit; }
.phase img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.phase .body { padding: 14px 16px 18px; background: var(--white); border-top: 2px solid var(--navy); flex: 1; }
.phase .k { font-size: .74rem; font-weight: 800; color: var(--coral); letter-spacing: .08em; }
.phase h4 { margin: 2px 0 4px; font-size: 1.05rem; }
.phase p { margin: 0; font-size: .85rem; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 760px) { .phases { grid-template-columns: 1fr 1fr; } }

/* tools grid */
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tool { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border: 1.5px solid var(--line); border-radius: 16px; padding: 16px; }
.tool .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--yellow-wash); display: grid; place-items: center; flex-shrink: 0; color: var(--navy); }
.tool h4 { margin: 0 0 2px; font-size: 1rem; }
.tool p { margin: 0; font-size: .86rem; color: var(--ink-3); line-height: 1.5; }
.tool .opt { font-size: .7rem; font-weight: 800; color: var(--ink-3); background: var(--line); padding: 1px 6px; border-radius: 5px; margin-left: 4px; vertical-align: 2px; }
@media (max-width: 860px) { .tools { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tools { grid-template-columns: 1fr; } }

/* step block */
.step { padding: 8px 0 56px; margin-bottom: 40px; border-bottom: 2px dashed var(--line); }
.step:last-of-type { border-bottom: 0; }
.step-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.step-num { width: 60px; height: 60px; border-radius: 18px; background: var(--navy); color: var(--yellow); font-weight: 900; font-size: 1.6rem; display: grid; place-items: center; flex-shrink: 0; box-shadow: 3px 3px 0 var(--yellow); }
.step-head .k { font-size: .78rem; font-weight: 800; color: var(--coral); letter-spacing: .08em; }
.step-head h2 { font-size: clamp(1.4rem, 3.2vw, 1.85rem); margin: 2px 0 6px; }
.step-head .sub { color: var(--ink-2); font-weight: 600; margin: 0; }
.step-head .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip.time { background: var(--blue-soft); border-color: transparent; color: var(--blue); }
.chip.key { background: var(--coral); border-color: transparent; color: #fff; }
.step > p, .step .prose p { color: var(--ink-2); }

.done-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font: inherit; font-weight: 800; font-size: .95rem; color: var(--navy); background: var(--white); border: 2px solid var(--navy); border-radius: 999px; padding: 10px 18px 10px 12px; cursor: pointer; transition: background .2s; }
.done-btn .box { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--navy); display: grid; place-items: center; }
.done-btn .box svg { width: 13px; height: 13px; opacity: 0; }
.done-btn:hover { background: var(--yellow-wash); }
.done-btn[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.done-btn[aria-pressed="true"] .box { border-color: #fff; background: #fff; }
.done-btn[aria-pressed="true"] .box svg { opacity: 1; color: var(--green); }

/* callouts */
.callout { border-radius: 16px; padding: 18px 20px 18px 56px; position: relative; margin: 20px 0; line-height: 1.7; }
.callout::before { content: ""; position: absolute; left: 18px; top: 19px; width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout .t { display: block; font-weight: 900; color: var(--navy); margin-bottom: 4px; }
.callout ul { padding-left: 1.1em; }
.callout.tip { background: var(--yellow-wash); border: 1.5px solid #F4DE86; }
.callout.tip::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1F5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z' fill='%23FFD43B'/%3E%3C/svg%3E"); }
.callout.key { background: var(--coral-soft); border: 1.5px solid #F7C2B6; }
.callout.key::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23F0553B'/%3E%3Cpath d='M12 7v6M12 16.5v.5' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.callout.info { background: var(--blue-soft); border: 1.5px solid #C9D0F4; }
.callout.info::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%232F45C5'/%3E%3Cpath d='M12 11v6M12 7.5v.5' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* accordion */
.acc { border: 1.5px solid var(--line); border-radius: 16px; background: var(--white); margin-bottom: 10px; overflow: hidden; }
.acc > summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--navy); }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary .num { width: 30px; height: 30px; border-radius: 9px; background: var(--yellow); display: grid; place-items: center; font-size: .85rem; flex-shrink: 0; }
.acc > summary .count { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.acc > summary .chev { width: 18px; height: 18px; transition: transform .2s; flex-shrink: 0; }
.acc[open] > summary .chev { transform: rotate(180deg); }
.acc[open] > summary { border-bottom: 1.5px solid var(--line); }
.acc .acc-body { padding: 8px 18px 16px; }

/* question picker */
.qlist { list-style: none; padding: 0; margin: 0; }
.qlist li { margin: 0; }
.qlist label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 8px; border-radius: 10px; cursor: pointer; color: var(--ink-2); line-height: 1.6; }
.qlist label:hover { background: var(--paper); }
.qlist input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #C9C2B0; flex-shrink: 0; margin: 2px 0 0; cursor: pointer; display: grid; place-items: center; background: #fff; }
.qlist input:checked { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--blue); }
.qlist input:checked + span { color: var(--navy); font-weight: 700; }
.qlist .qn { color: var(--ink-3); font-weight: 700; font-size: .85rem; margin-right: 4px; font-variant-numeric: tabular-nums; }
.picker-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--navy); color: #fff; border-radius: 16px; padding: 14px 18px; margin: 16px 0; }
.picker-bar .count { font-weight: 900; font-size: 1.05rem; }
.picker-bar .count b { color: var(--yellow); font-size: 1.35rem; }
.picker-bar .hint { font-size: .88rem; color: rgba(255,255,255,.78); flex: 1; min-width: 180px; }
.picker-bar button { font: inherit; font-size: .85rem; font-weight: 800; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); border-radius: 99px; padding: 6px 14px; cursor: pointer; }
.picker-bar button:hover { background: rgba(255,255,255,.12); }
.picker-bar.goal { background: var(--green); }

/* comparison table */
.tbl-wrap { overflow-x: auto; border: 1.5px solid var(--line); border-radius: 16px; background: var(--white); margin: 16px 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 620px; }
.tbl th, .tbl td { text-align: left; padding: 14px 16px; border-bottom: 1.5px solid var(--line); vertical-align: top; line-height: 1.55; }
.tbl thead th { background: var(--navy); color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .04em; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--paper); }
.tbl td:first-child { font-weight: 800; color: var(--navy); white-space: nowrap; }
.tbl .best { display: inline-block; font-size: .68rem; font-weight: 900; background: var(--coral); color: #fff; padding: 1px 6px; border-radius: 5px; margin-left: 6px; vertical-align: 2px; }
.tbl a { font-weight: 700; white-space: nowrap; }

/* prompts */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.tab { font: inherit; font-weight: 800; font-size: .9rem; padding: 9px 16px; border-radius: 12px 12px 0 0; border: 2px solid var(--navy); border-bottom: 0; background: var(--white); color: var(--navy); cursor: pointer; position: relative; top: 2px; }
.tab[aria-selected="true"] { background: var(--navy); color: #fff; }
.tab .rec { font-size: .66rem; background: var(--coral); color: #fff; padding: 1px 6px; border-radius: 5px; margin-left: 6px; vertical-align: 2px; }
.prompt { border: 2px solid var(--navy); border-radius: 0 16px 16px 16px; background: var(--white); overflow: hidden; }
.prompt[hidden] { display: none; }
.prompt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: var(--yellow-wash); border-bottom: 2px solid var(--navy); flex-wrap: wrap; }
.prompt-head .ttl { font-weight: 900; color: var(--navy); }
.prompt-head .for { font-size: .85rem; color: var(--ink-2); font-weight: 600; display: block; }
.prompt pre { margin: 0; padding: 18px 20px; white-space: pre-wrap; word-break: break-word; font-family: var(--font); font-size: .93rem; line-height: 1.75; color: var(--ink); background: var(--white); max-height: 440px; overflow-y: auto; }
.copy-btn { font: inherit; font-size: .86rem; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; border: 2px solid var(--navy); background: var(--yellow); color: var(--navy); cursor: pointer; white-space: nowrap; }
.copy-btn:hover { background: var(--navy); color: #fff; }
.copy-btn.copied { background: var(--green); border-color: var(--green); color: #fff; }
.copy-btn svg { width: 15px; height: 15px; }

/* app path */
.app-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 16px; background: #1B1C22; border-radius: 16px; margin: 14px 0; }
.app-path span { background: #2C2E38; color: #fff; padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: .9rem; }
.app-path span.end { background: var(--yellow); color: var(--navy); }
.app-path i { color: #8A8DA3; font-style: normal; font-weight: 900; }

.numlist { list-style: none; padding: 0; counter-reset: n; margin: 14px 0; }
.numlist li { counter-increment: n; position: relative; padding: 10px 0 10px 46px; border-bottom: 1.5px solid var(--line); color: var(--ink-2); margin: 0; }
.numlist li:last-child { border-bottom: 0; }
.numlist li::before { content: counter(n); position: absolute; left: 0; top: 9px; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-weight: 900; display: grid; place-items: center; font-size: .85rem; }

/* card grids inside steps */
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
@media (max-width: 760px) { .cards-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards-2, .cards-3 { grid-template-columns: 1fr; } }
.mini { background: var(--white); border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.mini .top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mini .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--yellow-wash); color: var(--navy); flex-shrink: 0; }
.mini .ic svg { width: 20px; height: 20px; }
.mini h4 { margin: 0; font-size: 1rem; }
.mini p { margin: 0 0 4px; font-size: .9rem; color: var(--ink-2); line-height: 1.6; }
.mini .search { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
.mini .search code { font-family: var(--font); font-size: .8rem; font-weight: 700; background: var(--blue-soft); color: var(--blue); padding: 2px 8px; border-radius: 6px; }
.mini .free { display: inline-block; font-size: .78rem; font-weight: 800; color: var(--green); background: #DDF4EA; padding: 2px 8px; border-radius: 6px; margin-bottom: 6px; }
.mini a { font-weight: 700; font-size: .88rem; }
.mini .lbl { font-size: .75rem; font-weight: 800; color: var(--ink-3); letter-spacing: .06em; }

/* volume meter */
.meter { background: var(--white); border: 1.5px solid var(--line); border-radius: 16px; padding: 18px 20px; margin: 16px 0; }
.meter .row { display: grid; grid-template-columns: 92px 1fr 64px; gap: 12px; align-items: center; margin-bottom: 10px; font-size: .9rem; font-weight: 700; color: var(--navy); }
.meter .row:last-child { margin-bottom: 0; }
.meter .track { height: 14px; background: var(--line); border-radius: 99px; position: relative; overflow: hidden; }
.meter .fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 99px; }
.meter .range { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, var(--coral), var(--coral) 4px, #F57A65 4px, #F57A65 8px); border-radius: 99px; }
.meter .val { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.meter .cap { font-size: .82rem; color: var(--ink-3); margin-top: 10px; }

/* gallery of B-roll ideas */
.broll { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 16px 0; }
.broll .item { border-radius: 16px; padding: 16px; color: #fff; min-height: 150px; display: flex; flex-direction: column; }
.broll .item:nth-child(1) { background: var(--blue); }
.broll .item:nth-child(2) { background: var(--coral); }
.broll .item:nth-child(3) { background: var(--navy); }
.broll .item:nth-child(4) { background: #E9B300; color: var(--navy); }
.broll .item:nth-child(5) { background: #5B3FB8; }
.broll .item svg { width: 28px; height: 28px; margin-bottom: 8px; }
.broll .item h4 { color: inherit; margin: 0 0 6px; }
.broll .item p { margin: 0; font-size: .88rem; line-height: 1.6; opacity: .92; }

.finish { background: var(--navy); color: #fff; border-radius: 24px; padding: 32px; text-align: center; margin-top: 28px; position: relative; overflow: hidden; }
.finish .big { font-size: clamp(2rem, 6vw, 3rem); font-weight: 900; color: var(--yellow); line-height: 1.1; }
.finish p { color: rgba(255,255,255,.85); margin: 10px 0 0; }

.infographic { border: 2px solid var(--navy); border-radius: 22px; overflow: hidden; background: var(--white); }
.infographic summary { cursor: pointer; padding: 16px 20px; font-weight: 800; color: var(--navy); display: flex; align-items: center; gap: 10px; list-style: none; }
.infographic summary::-webkit-details-marker { display: none; }
.infographic summary .chev { margin-left: auto; width: 18px; height: 18px; transition: transform .2s; }
.infographic[open] summary .chev { transform: rotate(180deg); }
.infographic img { max-width: 560px; margin: 0 auto; padding: 0 16px 16px; }

/* reveal on scroll (progressive enhancement) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---- mobile refinements ---- */
.tbl td:first-child { white-space: normal; min-width: 120px; }
@media (max-width: 640px) {
  .stairs { flex-direction: column; height: auto; align-items: stretch; }
  .stair { height: auto !important; flex-direction: row; align-items: center; gap: 14px; border-radius: 16px; }
  .stair:nth-child(1) { margin-right: 24%; } .stair:nth-child(2) { margin-right: 12%; }
  .stair .t { margin-top: 0; } .stair .s { margin-top: 2px; }
  .stair > span:not(.n) { display: block; }
  .stair .txt { display: block; }
  .tbl-wrap { border: 0; background: transparent; overflow: visible; }
  .tbl { min-width: 0; }
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr { background: var(--white); border: 1.5px solid var(--line); border-radius: 16px; margin-bottom: 10px; padding: 6px 0; }
  .tbl td { border: 0; padding: 6px 16px; }
  .tbl td:first-child { font-size: 1.05rem; padding-top: 10px; }
  .tbl td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: var(--ink-3); }
}

/* =========================================================
   ARTICLE COMPONENTS (lesson / knowledge pages)
   ========================================================= */
.article { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.sec { padding: 40px 0 16px; }
.sec + .sec { border-top: 2px dashed var(--line); }
.sec-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.sec-num { min-width: 52px; height: 52px; padding: 0 8px; border-radius: 16px; background: var(--yellow); border: 2px solid var(--navy); color: var(--navy); font-weight: 900; font-size: 1.35rem; display: grid; place-items: center; flex-shrink: 0; box-shadow: 3px 3px 0 var(--navy); }
.sec-head h2 { margin: 0; font-size: clamp(1.45rem, 3.4vw, 2rem); }
.sec-head p { margin: 6px 0 0; color: var(--ink-3); font-weight: 600; }
.sec > p, .prose p { color: var(--ink-2); }
.prose ul li, .sec > ul li { color: var(--ink-2); }
.lede { font-size: 1.12rem; color: var(--ink-2); }
.big-quote { font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 900; color: var(--navy); line-height: 1.45; border-left: 6px solid var(--coral); padding: 4px 0 4px 18px; margin: 24px 0; }
.big-quote small { display: block; font-size: .62em; color: var(--ink-3); font-weight: 700; margin-top: 6px; }

.intro-card { background: var(--white); border: 2px solid var(--navy); border-radius: 22px; padding: 26px 28px; box-shadow: var(--shadow-pop); margin: 8px 0 8px; }
.intro-card p { color: var(--ink-2); }
.intro-card p:last-child { margin-bottom: 0; }
.speech { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.speech span { background: var(--blue-soft); color: var(--blue); font-weight: 800; padding: 8px 14px; border-radius: 16px 16px 16px 4px; }

/* numbered cards */
.ncards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 18px 0; }
.ncard { background: var(--white); border: 1.5px solid var(--line); border-radius: 18px; padding: 22px; position: relative; }
.ncard .n { width: 40px; height: 40px; border-radius: 12px; background: var(--navy); color: var(--yellow); font-weight: 900; display: grid; place-items: center; margin-bottom: 12px; font-size: 1.05rem; }
.ncard:nth-child(4n+2) .n { background: var(--coral); color: #fff; }
.ncard:nth-child(4n+3) .n { background: var(--blue); color: #fff; }
.ncard:nth-child(4n+4) .n { background: var(--yellow); color: var(--navy); }
.ncard h3, .ncard h4 { margin: 0 0 6px; font-size: 1.08rem; }
.ncard p { margin: 0 0 6px; font-size: .94rem; color: var(--ink-2); line-height: 1.65; }
.ncard p:last-child { margin-bottom: 0; }
.ncard ul { font-size: .92rem; color: var(--ink-2); margin: 6px 0 0; padding-left: 1.1em; }
.ncards.stack { grid-template-columns: 1fr; }

/* layered pyramid */
.layers { display: grid; gap: 10px; margin: 18px 0; }
.layer { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 18px; border: 2px solid var(--navy); }
.layer .n { font-size: 1.8rem; font-weight: 900; text-align: center; }
.layer h3 { margin: 0 0 4px; font-size: 1.1rem; color: inherit; }
.layer p { margin: 0; font-size: .94rem; line-height: 1.65; opacity: .92; }
.layer:nth-child(1) { background: var(--navy); color: #fff; margin: 0 14%; }
.layer:nth-child(2) { background: var(--blue); color: #fff; margin: 0 7%; }
.layer:nth-child(3) { background: var(--yellow); color: var(--navy); }
.layer:nth-child(1) h3, .layer:nth-child(2) h3 { color: #fff; }
@media (max-width: 600px) { .layer { margin: 0 !important; grid-template-columns: 44px 1fr; } }

/* flow with arrows */
.flow { display: flex; gap: 0; align-items: stretch; margin: 20px 0; flex-wrap: wrap; }
.flow .f { flex: 1 1 0; min-width: 120px; background: var(--white); border: 2px solid var(--navy); border-radius: 16px; padding: 14px 14px; text-align: center; position: relative; }
.flow .f + .f { margin-left: 26px; }
.flow .f + .f::before { content: "→"; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); font-weight: 900; color: var(--coral); font-size: 1.2rem; }
.flow .f .k { display: block; font-size: .72rem; font-weight: 900; letter-spacing: .08em; color: var(--coral); }
.flow .f b { display: block; color: var(--navy); font-weight: 900; line-height: 1.3; }
.flow .f small { display: block; color: var(--ink-3); font-size: .8rem; line-height: 1.4; margin-top: 4px; }
.flow .f:nth-child(odd) { background: var(--yellow-wash); }
@media (max-width: 700px) {
  .flow { flex-direction: column; }
  .flow .f + .f { margin-left: 0; margin-top: 26px; }
  .flow .f + .f::before { content: "↓"; left: 50%; top: -24px; transform: translateX(-50%); }
}

/* compare: two columns */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.vs > div { border-radius: 20px; padding: 22px; border: 2px solid var(--navy); }
.vs .a { background: var(--white); }
.vs .b { background: var(--yellow-wash); }
.vs h3, .vs h4 { margin: 0 0 8px; }
.vs .tag { display: inline-block; font-size: .72rem; font-weight: 900; letter-spacing: .08em; padding: 2px 8px; border-radius: 6px; margin-bottom: 8px; }
.vs .a .tag { background: var(--coral-soft); color: var(--coral); }
.vs .b .tag { background: var(--navy); color: var(--yellow); }
.vs ul { padding-left: 1.1em; margin: 0; color: var(--ink-2); font-size: .95rem; }
.vs p { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 640px) { .vs { grid-template-columns: 1fr; } }

/* example / template boxes */
.ex { border: 2px dashed #D8CDB4; border-radius: 16px; padding: 14px 18px; margin: 12px 0; background: var(--paper); }
.ex .t { display: block; font-size: .75rem; font-weight: 900; letter-spacing: .08em; color: var(--coral); margin-bottom: 4px; }
.ex p, .ex ul { margin: 0; color: var(--ink-2); font-size: .94rem; }
.ex ul { padding-left: 1.1em; }
.fill { font-size: 1.15rem; font-weight: 800; color: var(--navy); background: var(--white); border: 2px solid var(--navy); border-radius: 16px; padding: 18px 22px; margin: 12px 0; line-height: 1.7; }
.fill u { text-decoration: none; border-bottom: 3px solid var(--coral); padding: 0 1.5em; }

/* labeled rows inside cards (點解有效 / 點樣用) */
.rows { display: grid; gap: 8px; margin: 10px 0; }
.rows > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; font-size: .94rem; color: var(--ink-2); line-height: 1.65; }
.rows > div > b { font-size: .78rem; font-weight: 900; color: var(--blue); background: var(--blue-soft); border-radius: 8px; padding: 3px 8px; height: fit-content; text-align: center; }
@media (max-width: 520px) { .rows > div { grid-template-columns: 1fr; gap: 4px; } .rows > div > b { width: fit-content; } }

/* big card with header bar */
.bcard { background: var(--white); border: 2px solid var(--navy); border-radius: 22px; overflow: hidden; margin: 18px 0; }
.bcard-head { display: flex; gap: 14px; align-items: center; padding: 16px 20px; background: var(--yellow-wash); border-bottom: 2px solid var(--navy); }
.bcard-head .n { width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: var(--yellow); font-weight: 900; font-size: 1.15rem; display: grid; place-items: center; flex-shrink: 0; }
.bcard-head h3 { margin: 0; font-size: 1.15rem; }
.bcard-head p { margin: 2px 0 0; font-size: .9rem; color: var(--ink-3); font-weight: 600; }
.bcard-body { padding: 18px 20px 20px; }
.bcard-body > p { color: var(--ink-2); }
.bcard-body > *:last-child { margin-bottom: 0; }

/* copyable lines */
.lines { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.lines li { margin: 0; }
.line-btn { width: 100%; text-align: left; font: inherit; font-size: .95rem; line-height: 1.55; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 44px 10px 14px; cursor: pointer; position: relative; transition: border-color .15s, background .15s; }
.line-btn:hover { border-color: var(--navy); background: var(--white); }
.line-btn::after { content: ""; position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); opacity: .45; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1F5B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat; }
.line-btn:hover::after { opacity: 1; }
.line-btn.copied { border-color: var(--green); background: #E8F7F0; }
.line-btn.copied::after { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F9D6B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.structs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.structs span { background: var(--blue-soft); color: var(--navy); font-weight: 700; font-size: .9rem; padding: 6px 12px; border-radius: 10px; }
.structs span em { font-style: normal; color: var(--coral); font-weight: 900; }

/* quick index grid (e.g. 10 hook types) */
.qindex { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 18px 0 28px; }
.qindex a { display: block; text-decoration: none; background: var(--white); border: 2px solid var(--navy); border-radius: 16px; padding: 12px 12px 14px; color: var(--navy); transition: transform .15s, box-shadow .15s; }
.qindex a:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-pop); color: var(--navy); }
.qindex .n { font-size: 1.4rem; font-weight: 900; color: var(--coral); line-height: 1; }
.qindex b { display: block; font-size: .92rem; line-height: 1.35; margin-top: 6px; }
@media (max-width: 860px) { .qindex { grid-template-columns: repeat(2, 1fr); } }

/* cycle diagram */
.cycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 22px 0; position: relative; }
.cycle .c { text-align: center; padding: 0 6px; position: relative; }
.cycle .c .dot { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; border: 2px solid var(--navy); font-size: 1.5rem; background: var(--white); box-shadow: 3px 3px 0 var(--navy); }
.cycle .c:nth-child(1) .dot { background: var(--yellow); } .cycle .c:nth-child(2) .dot { background: var(--coral-soft); }
.cycle .c:nth-child(3) .dot { background: var(--blue-soft); } .cycle .c:nth-child(4) .dot { background: #DDF4EA; }
.cycle .c b { display: block; color: var(--navy); font-weight: 900; }
.cycle .c small { display: block; color: var(--ink-3); font-size: .84rem; line-height: 1.45; }
.cycle .c + .c::before { content: "→"; position: absolute; left: -10px; top: 20px; font-weight: 900; color: var(--coral); font-size: 1.3rem; }
.cycle-note { text-align: center; font-size: .86rem; color: var(--ink-3); font-weight: 700; }
@media (max-width: 640px) { .cycle { grid-template-columns: 1fr 1fr; row-gap: 22px; } .cycle .c:nth-child(3)::before { display: none; } }

/* funnel */
.funnel { display: grid; gap: 6px; margin: 20px 0; }
.funnel a, .funnel div.fl { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 12px; color: #fff; text-decoration: none; font-weight: 800; margin: 0 auto; width: 100%; transition: transform .15s; }
.funnel a:hover { transform: scale(1.02); color: #fff; }
.funnel .n { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: .85rem; flex-shrink: 0; }
.funnel small { margin-left: auto; font-weight: 600; opacity: .85; font-size: .82rem; text-align: right; }
.funnel > *:nth-child(1) { width: 100%; background: var(--navy); }
.funnel > *:nth-child(2) { width: 92%; background: #22348F; }
.funnel > *:nth-child(3) { width: 84%; background: var(--blue); }
.funnel > *:nth-child(4) { width: 76%; background: #5B3FB8; }
.funnel > *:nth-child(5) { width: 68%; background: var(--coral); }
.funnel > *:nth-child(6) { width: 60%; background: #E9B300; color: var(--navy); }
@media (max-width: 560px) { .funnel > * { width: 100% !important; } .funnel small { display: none; } }

/* quadrant */
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.quad > div { border-radius: 20px; padding: 20px 22px; color: #fff; }
.quad > div:nth-child(1) { background: var(--blue); }
.quad > div:nth-child(2) { background: var(--coral); }
.quad > div:nth-child(3) { background: var(--navy); }
.quad > div:nth-child(4) { background: #E9B300; color: var(--navy); }
.quad h3 { color: inherit; margin: 0 0 6px; font-size: 1.15rem; }
.quad .k { font-size: .74rem; font-weight: 900; letter-spacing: .1em; opacity: .8; }
.quad p, .quad li { font-size: .92rem; line-height: 1.6; opacity: .95; margin: 0 0 4px; }
.quad ul { padding-left: 1.1em; margin: 6px 0 0; }
@media (max-width: 640px) { .quad { grid-template-columns: 1fr; } }

/* summary panel */
.summary { background: var(--navy); color: #fff; border-radius: 24px; padding: 28px 30px; margin: 28px 0 8px; position: relative; overflow: hidden; }
.summary h2, .summary h3 { color: var(--yellow); }
.summary p, .summary li { color: rgba(255,255,255,.88); }
.summary strong { color: #fff; }
.summary ul { padding-left: 1.1em; }
.summary .dots { position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; background-image: radial-gradient(var(--yellow) 1.3px, transparent 1.4px); background-size: 12px 12px; opacity: .3; }

/* related cards */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 22px 0 0; }

/* check list (interactive) */
.checks { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.checks li { margin: 0; }
.checks label { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; color: var(--ink-2); line-height: 1.6; }
.checks label:hover { border-color: var(--navy); }
.checks input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #C9C2B0; flex-shrink: 0; margin: 2px 0 0; cursor: pointer; background: #fff; }
.checks input:checked { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--green); }
.checks input:checked + span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }

/* step timeline for article (vertical) */
.vsteps { list-style: none; padding: 0; margin: 18px 0; position: relative; }
.vsteps::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; border-left: 3px dashed #D8CDB4; }
.vsteps > li { position: relative; padding: 0 0 22px 64px; margin: 0; }
.vsteps > li:last-child { padding-bottom: 0; }
.vsteps > li > .n { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--navy); display: grid; place-items: center; font-weight: 900; color: var(--navy); }
.vsteps > li h3, .vsteps > li h4 { margin: 8px 0 6px; }
.vsteps > li p, .vsteps > li ul { color: var(--ink-2); font-size: .96rem; }

/* video grid (portfolio) */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 16px 0; }

/* page-level TOC chips */
.page-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.page-toc a { font-size: .86rem; font-weight: 800; text-decoration: none; color: var(--navy); background: var(--white); border: 1.5px solid var(--navy); border-radius: 999px; padding: 6px 12px; }
.page-toc a:hover { background: var(--yellow); color: var(--navy); }

/* climb (Everest) */
.climb { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; height: 430px; margin: 24px 0 8px; position: relative; }
.climb a { text-decoration: none; border: 2px solid var(--navy); border-radius: 14px 14px 4px 4px; padding: 12px 10px; display: flex; flex-direction: column; color: #fff; box-shadow: 3px 3px 0 var(--navy); transition: transform .15s; }
.climb a:hover { transform: translateY(-4px); color: #fff; }
.climb .n { font-size: 1.5rem; font-weight: 900; line-height: 1; }
.climb b { display: block; font-weight: 900; margin-top: 6px; line-height: 1.25; font-size: .98rem; }
.climb small { display: block; font-size: .78rem; opacity: .9; margin-top: 2px; }
.climb a:nth-child(1) { height: 46%; background: var(--yellow); color: var(--navy); }
.climb a:nth-child(2) { height: 59%; background: var(--coral); }
.climb a:nth-child(3) { height: 72%; background: #5B3FB8; }
.climb a:nth-child(4) { height: 86%; background: var(--blue); }
.climb a:nth-child(5) { height: 100%; background: var(--navy); color: var(--yellow); }
.climb a:nth-child(5)::before { content: "🚩"; font-size: 1.4rem; margin-bottom: 4px; }
@media (max-width: 640px) {
  .climb { grid-template-columns: 1fr; height: auto; gap: 8px; }
  .climb a { height: auto !important; display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: start; border-radius: 14px; }
  .climb a > .n { grid-row: span 3; align-self: center; }
  .climb a > *:not(.n) { grid-column: 2; }
  .climb a:nth-child(1) { margin-right: 32%; } .climb a:nth-child(2) { margin-right: 24%; } .climb a:nth-child(3) { margin-right: 16%; } .climb a:nth-child(4) { margin-right: 8%; }
  .climb a:nth-child(5)::before { display: none; }
  .climb b { margin-top: 0; }
}
.story-ex { display: grid; gap: 0; border: 2px solid var(--navy); border-radius: 18px; overflow: hidden; background: var(--white); }
.story-ex > div { display: grid; grid-template-columns: 120px 1fr; border-top: 1.5px solid var(--line); }
.story-ex > div:first-child { border-top: 0; }
.story-ex > div > b { padding: 12px 14px; font-size: .82rem; font-weight: 900; letter-spacing: .02em; color: var(--navy); background: var(--yellow-wash); }
.story-ex > div:nth-child(2) > b { background: var(--coral-soft); }
.story-ex > div:nth-child(3) > b { background: #ECE6FA; }
.story-ex > div:nth-child(4) > b { background: var(--blue-soft); }
.story-ex > div:nth-child(5) > b { background: #DDF4EA; }
.story-ex > div > span { padding: 12px 16px; color: var(--ink-2); font-size: .95rem; line-height: 1.65; }
@media (max-width: 560px) { .story-ex > div { grid-template-columns: 1fr; } .story-ex > div > b { padding: 6px 14px; } }
.ig-embed { margin: 24px auto; max-width: 420px; }
.ex-copy { position: relative; padding-top: 44px; font-size: .94rem; color: var(--ink-2); line-height: 1.75; }
.ex-copy .copy-mini { position: absolute; top: 8px; right: 8px; padding: 5px 12px; font-size: .78rem; }
.ex-copy p { margin: 0 0 .5em; }
.prose h4 { margin: 20px 0 6px; color: var(--navy); }
.prose ul { color: var(--ink-2); }
.prose code { font-family: ui-monospace, Menlo, monospace; font-size: .85em; background: var(--blue-soft); color: var(--blue); padding: 1px 6px; border-radius: 6px; }
.summary .ig-embed blockquote { background: #fff !important; }
/* speed scale */
.speed { background: var(--white); border: 1.5px solid var(--line); border-radius: 18px; padding: 18px 20px 12px; margin: 16px 0; }
.speed-track { position: relative; height: 64px; }
.speed-track span { position: absolute; top: 0; transform: translateX(-10%); font-size: .82rem; font-weight: 800; color: var(--navy); line-height: 1.3; white-space: nowrap; }
.speed-track span small { font-weight: 600; color: var(--ink-3); }
.speed-axis { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.speed-axis i { flex: 1; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--coral), var(--yellow), var(--blue), var(--navy)); }
.speed-axis b { font-size: .85rem; color: var(--navy); }
.speed .cap { margin: 6px 0 0; text-align: center; font-size: .8rem; color: var(--ink-3); font-weight: 700; }
@media (max-width: 640px) { .speed-track { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .speed-track span { position: static; transform: none; white-space: normal; } }
.funnel .fl { font-weight: 700; line-height: 1.5; }
/* hub & spokes */
.hub { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: center; margin: 18px 0; }
.hub-core { background: var(--navy); color: #fff; border-radius: 22px; padding: 24px; text-align: center; box-shadow: 4px 4px 0 var(--yellow); }
.hub-core b { display: block; font-size: 1.2rem; color: var(--yellow); margin: 4px 0; }
.hub-core small, .hub-core .k { display: block; font-size: .82rem; opacity: .85; }
.hub-spokes { display: grid; gap: 8px; position: relative; }
.hub-spokes > div { background: var(--white); border: 2px solid var(--navy); border-radius: 14px; padding: 10px 14px; position: relative; }
.hub-spokes > div::before { content: ""; position: absolute; left: -18px; top: 50%; width: 16px; border-top: 3px dashed var(--coral); }
.hub-spokes .k { font-size: .72rem; font-weight: 900; color: var(--coral); margin-right: 6px; }
.hub-spokes b { color: var(--navy); }
.hub-spokes small { display: block; color: var(--ink-3); font-size: .8rem; }
@media (max-width: 640px) { .hub { grid-template-columns: 1fr; } .hub-spokes > div::before { display: none; } }
/* effort table */
.effort { border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white); margin: 16px 0; }
.er { display: grid; grid-template-columns: 110px 90px 110px 1fr; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1.5px solid var(--line); font-size: .92rem; color: var(--ink-2); }
.er:first-child { border-top: 0; }
.er.head { background: var(--navy); color: #fff; font-weight: 800; font-size: .8rem; }
.er b { color: var(--navy); }
.lv { display: inline-block; text-align: center; font-weight: 900; font-size: .82rem; padding: 4px 8px; border-radius: 8px; }
.lv.l1 { background: #DDF4EA; color: var(--green); } .lv.l2 { background: var(--yellow-wash); color: #8A6A00; }
.lv.l3 { background: var(--coral-soft); color: var(--coral); } .lv.l4 { background: var(--coral); color: #fff; }
@media (max-width: 600px) { .er { grid-template-columns: 1fr 1fr 1fr; } .er > span:last-child { grid-column: 1 / -1; } .er.head > span:last-child { display: none; } }
/* ratio bar */
.ratio { display: flex; height: 54px; border-radius: 14px; overflow: hidden; border: 2px solid var(--navy); margin: 14px 0; }
.ratio > div { display: grid; place-items: center; color: #fff; font-size: .95rem; }
.ncard .n { min-width: 40px; width: fit-content; padding: 0 10px; }
.kpi3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.kpi3 > div { border-radius: 14px; padding: 12px 14px; font-size: .9rem; line-height: 1.6; }
.kpi3 > div > span { display: block; font-size: .72rem; font-weight: 900; letter-spacing: .08em; margin-bottom: 4px; }
.kpi3 p, .kpi3 ul { margin: 0; } .kpi3 ul { padding-left: 1.1em; }
.kpi3 .k1 { background: var(--blue-soft); color: var(--navy); } .kpi3 .k1 > span { color: var(--blue); }
.kpi3 .k2 { background: var(--coral-soft); color: var(--ink); } .kpi3 .k2 > span { color: var(--coral); }
.kpi3 .k3 { background: #DDF4EA; color: var(--ink); } .kpi3 .k3 > span { color: var(--green); }
@media (max-width: 760px) { .kpi3 { grid-template-columns: 1fr; } }
.calc { border: 2px solid var(--navy); border-radius: 22px; background: var(--white); padding: 20px; box-shadow: var(--shadow-pop); margin: 16px 0; }
.calc-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.calc-in label { font-size: .85rem; font-weight: 800; color: var(--navy); display: grid; gap: 6px; }
.calc-in input { font: inherit; font-size: 1rem; font-weight: 600; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); min-width: 0; }
.calc-in input:focus { border-color: var(--blue); outline: none; background: #fff; }
.calc-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.calc-out > div { background: var(--navy); color: #fff; border-radius: 14px; padding: 12px 14px; }
.calc-out span { display: block; font-size: .76rem; font-weight: 700; opacity: .8; }
.calc-out b { display: block; font-size: 1.35rem; font-weight: 900; color: var(--yellow); font-variant-numeric: tabular-nums; }
.calc .cap { font-size: .8rem; color: var(--ink-3); margin: 10px 0 0; }
@media (max-width: 640px) { .calc-in, .calc-out { grid-template-columns: 1fr 1fr; } }
.setting { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.setting > div { background: var(--white); border: 2px solid var(--navy); border-radius: 14px; padding: 12px 14px; }
.setting span { display: block; font-size: .74rem; font-weight: 900; color: var(--coral); letter-spacing: .06em; }
.setting b { display: block; color: var(--navy); font-size: 1.05rem; }
.setting small { display: block; color: var(--ink-3); font-size: .78rem; line-height: 1.4; margin-top: 2px; }
/* portfolio */
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.work { background: var(--white); border: 2px solid var(--navy); border-radius: 18px; overflow: hidden; }
.work[hidden] { display: none; }
.yt-card { position: relative; aspect-ratio: 16/9; background: #111; overflow: hidden; }
.yt-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.28); border: 0; cursor: pointer; transition: background .2s; }
.yt-play:hover { background: rgba(0,0,0,.12); }
.yt-play svg { width: 64px; height: 46px; }
.work-cap { padding: 10px 14px 12px; border-top: 2px solid var(--navy); }
.work-cap span { display: block; font-size: .72rem; font-weight: 800; color: var(--coral); }
.work-cap b { color: var(--navy); }
.works .ig-tile { aspect-ratio: auto; min-height: 100%; }
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
.ig-tile { aspect-ratio: 9 / 14; border-radius: 18px; border: 2px solid var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px; color: #fff; text-decoration: none; gap: 6px; transition: transform .15s, box-shadow .15s; }
.ig-tile:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-pop); color: #fff; }
.ig-tile svg { width: 34px; height: 34px; }
.ig-tile .r { font-size: .72rem; font-weight: 800; opacity: .9; }
.ig-tile b { font-size: .95rem; }
.ig-tile .go { font-size: .74rem; font-weight: 800; background: rgba(255,255,255,.2); padding: 3px 10px; border-radius: 99px; margin-top: 6px; }
.t-beauty { background: linear-gradient(160deg, var(--coral), #C2357A); }
.t-shop { background: linear-gradient(160deg, var(--blue), #5B3FB8); }
.t-food { background: linear-gradient(160deg, #E9B300, var(--coral)); }
.ig-tile.has-cover { position: relative; padding: 0; overflow: hidden; background: var(--navy); justify-content: flex-end; }
.ig-tile.has-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ig-tile.has-cover:hover img { transform: scale(1.04); }
.ig-over { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 10px 14px; background: linear-gradient(transparent, rgba(14,31,91,.88)); }
.ig-over svg { width: 22px; height: 22px; }
/* asset galleries */
.asset-show { margin: 18px 0; padding: 16px; border-radius: 18px; background: var(--cream); border: 1.5px solid #EADCC0; }
.asset-tag { display: inline-block; font-size: .74rem; font-weight: 900; letter-spacing: .06em; color: #fff; background: var(--coral); padding: 3px 10px; border-radius: 99px; margin-bottom: 10px; }
.asset-note { font-size: .9rem; color: var(--ink-2); margin: 0 0 12px; }
.gallery { display: grid; gap: 10px; align-items: start; }
.gallery.g3 { grid-template-columns: repeat(3, 1fr); }
.gallery.g4 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .gallery.g3, .gallery.g4 { grid-template-columns: 1fr 1fr; } }
.gfig { margin: 0; }
.gfig a.zoom { display: block; border-radius: 12px; overflow: hidden; border: 2px solid var(--navy); background: var(--white); position: relative; cursor: zoom-in; }
.gfig a.zoom img { width: 100%; height: auto; transition: transform .25s; }
.gallery .gfig a.zoom { aspect-ratio: 4 / 3; }
.gallery .gfig a.zoom img { height: 100%; object-fit: cover; }
.gfig a.zoom:hover img { transform: scale(1.03); }
.gfig a.zoom::after { content: "⤢ 睇大圖"; position: absolute; right: 8px; bottom: 8px; font-size: .72rem; font-weight: 800; color: #fff; background: rgba(14,31,91,.8); padding: 3px 8px; border-radius: 99px; }
.asset-show > .gfig { max-width: 560px; }
.gfig figcaption { font-size: .82rem; color: var(--ink-3); margin-top: 6px; line-height: 1.45; }
.gfig figcaption b { display: block; color: var(--navy); font-size: .88rem; }
.gfig video { width: 100%; height: auto; border-radius: 12px; border: 2px solid var(--navy); background: #000; display: block; }
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 8px; }
.ba-arrow { font-size: 1.6rem; font-weight: 900; color: var(--coral); }
@media (max-width: 640px) { .ba { grid-template-columns: 1fr; } .ba-arrow { transform: rotate(90deg); justify-self: center; } }
/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; }
.lightbox::backdrop { background: rgba(10,14,40,.86); }
.lightbox img { max-width: 96vw; max-height: 86vh; width: auto; height: auto; border-radius: 10px; display: block; margin: 0 auto; }
.lightbox p { color: #fff; text-align: center; margin: 10px 0 0; font-weight: 700; font-size: .92rem; }
.lightbox button { position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--yellow); color: var(--navy); font-size: 1.4rem; font-weight: 900; cursor: pointer; }
.gallery.g2 { grid-template-columns: 1fr 1fr; max-width: 520px; }
.gallery.g2 .gfig a.zoom { aspect-ratio: 9 / 16; }
.frames { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; }
.frames .gfig a.zoom, .frames video { aspect-ratio: 9 / 16; }
.frames .gfig a.zoom img { height: 100%; object-fit: cover; }
.frames video { object-fit: cover; }
@media (max-width: 640px) { .frames { grid-template-columns: 1fr 1fr; } .frames .ba-arrow { display: none; } .frames .gfig:last-child { grid-column: 1 / -1; max-width: 260px; justify-self: center; } }
.wc textarea { width: 100%; font: inherit; font-size: 1rem; line-height: 1.7; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); resize: vertical; }
.wc textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
.timeline60 { background: var(--white); border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 16px 0; }
.tl-row { display: flex; gap: 3px; height: 34px; }
.tl-row .seg { border-radius: 5px; }
.seg.p, .tl-lbl i.p { background: var(--coral); } .seg.b, .tl-lbl i.b { background: var(--blue); } .seg.c, .tl-lbl i.c { background: var(--yellow); }
.tl-lbl { display: flex; gap: 3px; margin-top: 8px; font-size: .8rem; font-weight: 800; color: var(--navy); }
.tl-lbl span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tl-lbl i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.tl-axis { display: flex; justify-content: space-between; font-size: .74rem; color: var(--ink-3); margin-top: 6px; }
@media (max-width: 560px) { .tl-lbl { flex-direction: column; } }
.gallery.g-chars { grid-template-columns: 1fr 1.4fr; align-items: start; }
.gallery.g-chars .gfig a.zoom { aspect-ratio: auto; }
.gallery.g-chars .gfig a.zoom img { height: auto; }
@media (max-width: 640px) { .gallery.g-chars { grid-template-columns: 1fr; } }