/* Generated by npm run assets:fonts. Self-hosted SIL OFL fonts. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin-ext.a28eb6d3ccb534ae.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin.c940764593d0fe5d.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/noto-sc-0.b6ac8b91ade71c16.woff2) format('woff2'); unicode-range: U+20-7e, U+a1, U+b7, U+bf, U+c1, U+c3-c4, U+c9, U+cb, U+cd, U+cf, U+d1, U+d3, U+d5-d7, U+da, U+dc-dd, U+e1, U+e3-e4, U+e9, U+eb, U+ed, U+ef, U+f1, U+f3, U+f5-f6, U+fa, U+fc-fd, U+ff, U+106-107, U+128-129, U+139-13a, U+143-144, U+154-155, U+15a-15b, U+168-169, U+178-17a, U+1d7-1d8, U+1f4-1f5, U+301, U+303, U+308, U+1e26-1e27, U+1e2e-1e31, U+1e3e-1e3f, U+1e4c-1e4f, U+1e54-1e55, U+1e78-1e79, U+1e7c-1e7d, U+1e82-1e85, U+1e8c-1e8d, U+1e97, U+1ebc-1ebd, U+1ef8-1ef9, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+2190, U+2192, U+2212; }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/noto-sc-1.32050c2af2e9c2a5.woff2) format('woff2'); unicode-range: U+304f, U+3057, U+3059, U+3063, U+3066, U+307e, U+308d, U+3092, U+4e2d, U+4f53, U+4f7f, U+5f62, U+6210, U+6587, U+65e5, U+672c, U+7b80, U+7e41, U+8a9e, U+9ad4; }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/noto-sc-2.71ad3e49c1bf456f.woff2) format('woff2'); unicode-range: U+3001-3002, U+3005, U+300c-300d, U+3042, U+3044, U+3046, U+3048, U+304a-304e, U+3050-3051, U+3053-3056, U+3058, U+305a-305b, U+305d-3061, U+3064-3065, U+3067-306b, U+306e-3070, U+3073, U+3076, U+3078-3079, U+307b, U+307f-3082, U+3084, U+3086-308c, U+308f, U+3093, U+30a1-30a4, U+30a6-30b0, U+30b3-30bb, U+30bd-30c1, U+30c3-30c4, U+30c6-30cb, U+30cd, U+30cf-30de, U+30e0-30e7, U+30e9-30ed, U+30ef, U+30f3, U+30fb-30fc, U+4e00, U+4e09-4e0b, U+4e0d-4e0e, U+4e13-4e14, U+4e1a, U+4e24, U+4e26, U+4e2a, U+4e34, U+4e3a-4e3b, U+4e45, U+4e48-4e49, U+4e4b, U+4e5f-4e60, U+4e70, U+4e86, U+4e88-4e89, U+4e8b-4e8c, U+4e8e, U+4e92, U+4e9b, U+4ea4, U+4ea7, U+4eab, U+4eba, U+4ec0, U+4ec5, U+4eca-4ecb, U+4ecd-4ece, U+4ed5-4ed6, U+4ed8, U+4ee3-4ee5, U+4eec, U+4ef6-4ef7, U+4efb, U+4efd, U+4f18, U+4f1a, U+4f20, U+4f3a, U+4f46, U+4f48, U+4f4d-4f4f, U+4f55, U+4f59, U+4f5c, U+4f60, U+4f86, U+4f8b, U+4f9b, U+4f9d, U+4fb5, U+4fbf, U+4fc2-4fc3, U+4fdd, U+4fe1, U+4fee, U+500b, U+5011-5012, U+5019, U+504f, U+505a, U+505c, U+5065, U+5075-5076, U+5099, U+50a8, U+50b3, U+50c5, U+50cf, U+50f9, U+512a, U+5132, U+5141, U+5143, U+5145, U+5148, U+514d, U+5165, U+5167-5169, U+516c-516d, U+5171, U+5173, U+5176-5178, U+517c, U+5185, U+518a, U+518c-518d, U+5199, U+51b3, U+51b5, U+51c6, U+51cf, U+51e6, U+51ed, U+51fa-51fb, U+5206-5207, U+5212, U+5217, U+5219, U+521b, U+5220, U+5224-5225, U+5229-522b, U+5230, U+5236-5237, U+523b, U+5247, U+524a, U+524d, U+5269, U+526f, U+5275, U+529b, U+529e-52a1, U+52a8-52aa, U+52b9, U+52d5, U+52d9, U+52dd, U+52ff, U+5305, U+5316, U+5323, U+532f, U+5339-533a, U+533f-5341, U+5347, U+5354-5357, U+5360-5361, U+5373-5374, U+5378, U+537b, U+5386, U+539f, U+53bb, U+53c2-53c3, U+53ca, U+53cc-53ce, U+53d1, U+53d6-53d8, U+53e0, U+53e3-53e4, U+53e6, U+53ea, U+53ef-53f0, U+53f2-53f3, U+53f7, U+5404, U+5408, U+540c-540e, U+5411, U+5417, U+5426, U+542b, U+542f, U+544a, U+5468, U+5473, U+547d, U+548c, U+54a8, U+54c1, U+54c8, U+54cd, U+54ea, U+552e, U+5546, U+554f, U+555f, U+5584, U+559c, U+55ae, U+55b6, U+55ce, U+5617, U+5668, U+56de, U+56e0, U+56f2, U+56f4, U+56fa, U+56fd-56fe, U+570b, U+570d, U+5716, U+5728, U+5730, U+573a, U+573e, U+5740, U+5747, U+5783, U+578b, U+57cb, U+57df, U+57f7, U+57fa, U+5831, U+5834, U+5851, U+586b, U+5883, U+589e, U+58f0, U+58f2, U+5904, U+5907, U+5909, U+590d, U+5916, U+591a, U+591f-5920, U+5927, U+5929; }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/noto-sc-3.7856d708316d26de.woff2) format('woff2'); unicode-range: U+5931, U+5951, U+5957, U+597d, U+5982, U+59a5, U+59a8, U+59cb, U+5b50, U+5b57-5b58, U+5b83, U+5b88-5b89, U+5b8c, U+5b98, U+5b9a, U+5b9e-5b9f, U+5ba1-5ba2, U+5bb3, U+5bb6, U+5bb9, U+5bc4, U+5bc6, U+5be6, U+5beb, U+5bf9, U+5bfb-5bfc, U+5bfe, U+5c02, U+5c06-5c08, U+5c0d-5c0f, U+5c11, U+5c14, U+5c1a, U+5c1d, U+5c31, U+5c3e, U+5c40, U+5c42, U+5c4a, U+5c4f, U+5c55, U+5c5e, U+5c64-5c65, U+5c6c, U+5c71, U+5d4c, U+5de5-5de6, U+5dee, U+5df1-5df2, U+5e01, U+5e03, U+5e0c, U+5e26-5e27, U+5e2e, U+5e30, U+5e33, U+5e36, U+5e38, U+5e55, U+5e63, U+5e6b, U+5e72-5e74, U+5e76, U+5e7f, U+5e83, U+5e8f, U+5e93-5e94, U+5e97, U+5ea6-5ea7, U+5eab, U+5ee3, U+5ef6, U+5efa, U+5f00, U+5f0f, U+5f15, U+5f20, U+5f35, U+5f37, U+5f39-5f3a, U+5f48, U+5f52-5f53, U+5f55, U+5f71, U+5f79, U+5f80, U+5f84-5f85, U+5f8b-5f8c, U+5f91-5f93, U+5f97, U+5f9e, U+5fa1, U+5fa9-5faa, U+5fc3, U+5fc5-5fc6, U+5fd7-5fd8, U+5fdc, U+5feb, U+6001, U+600e, U+6027, U+603b, U+6062, U+606d, U+606f, U+60a8, U+60c5, U+60d1, U+60ef, U+60f3, U+610f, U+611f, U+614b, U+6162-6163, U+6167, U+6191, U+61b6, U+61c9, U+6211, U+6216, U+622a, U+6236-6237, U+623b, U+6240, U+624b, U+624d, U+6253, U+6255, U+6258, U+6263, U+6267, U+6269, U+6270-6271, U+6279, U+627e-6280, U+628a, U+6295, U+629e, U+62a4-62a5, U+62ab, U+62bc-62bd, U+62c5, U+62d2, U+62e0-62e1, U+62e9, U+6301, U+6307, U+6309, U+6362, U+6368, U+636e, U+6377, U+6388-6389, U+638c, U+6392, U+639b, U+63a2, U+63a5, U+63a7-63a8, U+63b2, U+63d0, U+63d2, U+63db, U+63e1, U+63f4, U+643a, U+64a4, U+64ad, U+64c7, U+64ca, U+64cd, U+64d4, U+64da, U+64f4, U+64fe, U+651c, U+652f, U+6536, U+6539, U+653e-653f, U+6545, U+6548, U+654f, U+6551, U+6557, U+6563, U+6570, U+6574, U+6578, U+6599, U+65ad, U+65b0, U+65b7, U+65b9, U+65bc, U+65c5, U+65e0, U+65e2, U+65e7, U+65f6, U+660e, U+6613, U+6620, U+662f, U+663e, U+6642, U+6668, U+666f-6670, U+667a, U+6682, U+6697, U+66ab, U+66ae, U+66b4, U+66f4, U+66f8, U+66ff-6700, U+6703, U+6708-6709, U+670d, U+671d, U+671f, U+672a-672b, U+672f, U+673a, U+6742-6743, U+6756, U+675f, U+6761, U+6765, U+6784, U+6790, U+679a, U+679c, U+67a0, U+67d0, U+67e5, U+67fb, U+6807, U+680f, U+6821, U+6837-6839, U+683c, U+6841, U+6848, U+6863, U+689d, U+68c0, U+691c, U+695a, U+696d, U+697d, U+69cb, U+6a19, U+6a23, U+6a29, U+6a5f, U+6a94, U+6aa2, U+6b04, U+6b0a, U+6b21-6b22, U+6b3e, U+6b61-6b65, U+6b69, U+6b74, U+6b78, U+6b8a-6b8b, U+6bb5, U+6bce-6bcf, U+6bd4, U+6c17, U+6c38, U+6c42, U+6c7a, U+6c89, U+6c92, U+6ca1, U+6cbf, U+6cc1, U+6cd5, U+6ce8, U+6d3b, U+6d41, U+6d4b, U+6d4e-6d4f, U+6d78, U+6d88, U+6db5, U+6dfb, U+6e05, U+6e08, U+6e13, U+6e1b, U+6e20-6e21, U+6e2c, U+6e4a, U+6e96, U+6eaf, U+6ee5, U+6f0f, U+6fc0, U+6fdf, U+6feb, U+700f, U+70b9-70ba, U+7121, U+7136, U+713c, U+7167, U+71df, U+722d, U+723d-723e, U+7247-7248, U+724c, U+7279, U+72af, U+72b6, U+72c0, U+72ec, U+7368, U+7372, U+7387, U+73b0, U+73fe, U+7406, U+751f, U+7522-7523, U+7528, U+7531, U+7533, U+7535, U+753b, U+754c, U+7559, U+756a-756b, U+7570, U+7576, U+758a, U+767a-767c; }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/noto-sc-4.2ab0edfd376b7395.woff2) format('woff2'); unicode-range: U+7684, U+76ca, U+76d1, U+76d6, U+76e3, U+76ee, U+76f4, U+76f8, U+7701, U+770b, U+771f, U+7740, U+7763, U+77e5, U+7801, U+786c, U+786e, U+78ba, U+78bc, U+793a, U+79c1, U+79cd, U+79d2, U+79f0, U+79fb, U+7a05, U+7a0b, U+7a0d-7a0e, U+7a2e, U+7a3d, U+7a93, U+7a97, U+7acb, U+7ad9, U+7ae0, U+7aef, U+7b14, U+7b26, U+7b2c, U+7b46, U+7b49, U+7b54, U+7b56, U+7b79, U+7b7e, U+7b97, U+7ba1, U+7bb1, U+7bc0, U+7bc4, U+7bc7, U+7c21, U+7c7b, U+7cbe, U+7cfb, U+7d00, U+7d04, U+7d1a-7d1b, U+7d2f-7d30, U+7d42, U+7d44, U+7d50, U+7d55, U+7d61, U+7d66, U+7d71, U+7d93, U+7d99-7d9a, U+7dad, U+7db2, U+7dcf, U+7dda, U+7de8, U+7e3d, U+7e5e, U+7e6b, U+7e7c, U+7e8c, U+7ea6-7ea7, U+7ebf, U+7ec6, U+7ec8, U+7ecd, U+7ecf, U+7ed3, U+7ed5, U+7ed9, U+7edc-7edd, U+7edf, U+7ee7, U+7eed, U+7ef4, U+7f16, U+7f51, U+7f6e, U+7fa9, U+7fd2, U+7ffb, U+8005, U+800c, U+804c, U+8054, U+806f, U+8072, U+8074, U+80a2, U+80fd, U+8111, U+811a, U+8166, U+81ea, U+81f3-81f4, U+8207, U+820a, U+820d, U+822a, U+822c, U+8282, U+82e5-82e6, U+82f1, U+8303, U+83b7, U+83dc, U+8425, U+843d, U+8457, U+84cb, U+8655, U+865f, U+87a2, U+884c, U+8853, U+8865, U+8868, U+88ab, U+88c5, U+88dd, U+88e1, U+88fd, U+8907, U+8981, U+8986, U+898b, U+898f, U+8996, U+89a7, U+89bd, U+89c0-89c2, U+89c4, U+89c6, U+89c8, U+89e3, U+8a00, U+8a02, U+8a08, U+8a0a, U+8a17-8a18, U+8a2a, U+8a2d, U+8a31, U+8a34, U+8a3a-8a3c, U+8a62, U+8a66, U+8a72-8a73, U+8a8c-8a8d, U+8aa4, U+8aaa, U+8aac-8aad, U+8ab0, U+8ab2, U+8abf, U+8acb, U+8afe, U+8b1b, U+8b49, U+8b58, U+8b70, U+8b72, U+8b77, U+8b80, U+8b8a, U+8b93, U+8ba1-8ba2, U+8ba4, U+8ba9, U+8bae, U+8bb0, U+8bb8, U+8bbe-8bbf, U+8bc1, U+8bc6, U+8bc9-8bca, U+8bd1, U+8bd5, U+8bdd, U+8be2, U+8be5-8be6, U+8bed, U+8bef, U+8bf4, U+8bf7, U+8bfa-8bfb, U+8bfe, U+8c01, U+8c03, U+8c37, U+8c61, U+8ca0-8ca1, U+8ca8-8ca9, U+8cac, U+8cb7, U+8cbb, U+8cc7, U+8ce2-8ce3, U+8ce6, U+8cea, U+8cfc, U+8d08, U+8d1f, U+8d23, U+8d25-8d26, U+8d28, U+8d2d, U+8d39, U+8d44, U+8d4b, U+8d60, U+8d70, U+8d77, U+8d85, U+8db3, U+8ddd, U+8ddf, U+8de1, U+8de8, U+8def, U+8df3, U+8eab, U+8ecc, U+8edf, U+8ee2, U+8f03, U+8f09, U+8f2a, U+8f2f, U+8f38, U+8f49, U+8f68, U+8f6c, U+8f6f, U+8f7d, U+8f83, U+8f91, U+8f93, U+8fa6, U+8fa8, U+8fbc, U+8fc7, U+8fce, U+8fd0-8fd1, U+8fd4, U+8fd8-8fd9, U+8fdb, U+8fde, U+8ff7, U+8ffd, U+9000-9002, U+9009, U+900f, U+9012, U+9014, U+9019-901a, U+901f-9020, U+9023, U+9031-9032, U+903e, U+9047, U+904b, U+904e, U+9053, U+9055, U+905e, U+9061, U+9069, U+9075, U+9078, U+907f, U+9084, U+90a3, U+90aa, U+90ae, U+90e8, U+90f5, U+90fd, U+914d, U+91cc-91cd, U+91cf, U+91d1, U+91d8, U+9215, U+9280, U+92b7, U+9304, U+932f, U+9332, U+9418, U+949f, U+94ae, U+94f6, U+94fe, U+9500, U+9519, U+9577, U+957f, U+9589, U+958b, U+9593, U+95a2, U+95b1-95b2, U+95dc, U+95e8, U+95ed-95ee, U+95f4, U+9605, U+9632, U+9645, U+964d, U+9650, U+9664, U+9669, U+9676, U+968e-9690, U+969b-969c, U+96a8, U+96aa, U+96b1, U+96bb, U+96c6, U+96d1, U+96d9, U+96dc, U+96fb, U+9700, U+9732, U+975e, U+9762, U+97d3, U+97e9, U+97f3, U+97ff, U+9801, U+9805-9806, U+9808, U+9810, U+9818, U+983b-983c, U+984c-984d, U+985e; }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/noto-sc-5.f1bd4cbed6c1696f.woff2) format('woff2'); unicode-range: U+986f, U+9875, U+9879-987b, U+9886, U+9891, U+9898, U+989d, U+98a8, U+98ce, U+9910, U+9918, U+9996, U+9a13, U+9a57, U+9a5f, U+9a8c, U+9aa4, U+9b54, U+9bae, U+9ebc, U+9ed8, U+9ede, U+ff08-ff09, U+ff0c, U+ff1a-ff1b, U+ff1f; }

@font-face { font-family: "Satoshi"; src: url("/brand/Satoshi-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
html { scroll-behavior: smooth; }
:root {
  --bg: #090b10;
  --cinema-background:
    radial-gradient(ellipse at 84% 35%, rgba(156,101,39,.28), transparent 53%),
    radial-gradient(ellipse at 8% 42%, rgba(91,62,145,.29), transparent 56%),
    linear-gradient(150deg, #12141f, #0a0d14 58%, #191511);
  --surface: #12151c;
  --raised: #1a1e28;
  --text: #f5f7fa;
  --muted: #a9b2c2;
  --gold: #f3bd69;
  --line: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
  font-family:
    Inter, "Noto Sans SC", "PingFang SC", "Microsoft Yahei", system-ui,
    sans-serif;
  background: var(--bg);
  color: var(--text);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select {
  font: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
a,
select,
input {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
a,
button {
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s,
    transform 0.18s;
}
a:hover {
  color: var(--gold);
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
button:disabled:hover {
  transform: none;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  color: var(--text);
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.35rem, 4.4vw, 3.8rem);
  letter-spacing: -0.045em;
  line-height: 1.17;
  font-weight: 750;
}
h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  letter-spacing: -0.035em;
  line-height: 1.3;
}
h3 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
p {
  color: var(--muted);
  line-height: 1.8;
}
svg {
  display: block;
}
main {
  min-height: 60vh;
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.skip {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: var(--gold);
  color: #090b10;
  padding: 12px;
}
.skip:focus {
  top: 12px;
}
body .container {
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
}
.container.narrow {
  max-width: 760px;
  margin-inline: auto;
}
.center {
  text-align: center;
}
.section {
  padding-block: 96px;
}
.tinted {
  background: #0b0e14;
}
.eyebrow {
  display: block;
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  font-weight: 650;
  margin-bottom: 12px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 17px 30px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
  min-height: 54px;
}
.button.primary {
  background: var(--gold);
  color: #15100a;
}
.button.primary:hover:not(:disabled) {
  background: #f8cb86;
  transform: translateY(-1px);
}
.button.secondary {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line);
  color: var(--text);
}
.button.secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.075);
  border-color: #666;
}
.button.compact {
  padding: 10px 18px;
  min-height: 42px;
  font-size: 0.83rem;
  gap: 14px;
}
.full {
  width: 100%;
}
.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(9, 11, 16, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.header-inner {
  height: 80px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: "Satoshi", Arial, sans-serif;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
}
.desktop-nav {
  display: flex;
  gap: 30px;
  font-size: 0.9rem;
  color: var(--muted);
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.85rem;
  color: var(--muted);
}
.language {
  display: flex;
  align-items: center;
  gap: 8px;
}
.language-icon {
  width: 18px;
  height: 18px;
  flex: none;
}
.language select {
  max-width: 110px;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 10px 0;
  cursor: pointer;
  font-size: 0.8rem;
}
.language option {
  background: var(--surface);
  color: var(--text);
}
.menu-toggle {
  display: none;
  background: none;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  width: 40px;
  height: 40px;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 24px 24px;
  gap: 8px;
}
.mobile-nav a {
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.mobile-language {
  display: none;
}
.hero {
  text-align: center;
  padding-top: 80px;
  padding-bottom: 58px;
}
.hero-label {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--gold);
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 28px;
}
.hero h1 {
  max-width: 900px;
  margin: 0 auto 26px;
}
.hero-intro {
  font-size: 1.15rem;
  max-width: 720px;
  margin: 0 auto 36px;
  line-height: 1.7;
}
.trial-note {
  font-size: 0.82rem;
  margin-top: 22px;
  margin-bottom: 0;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.section-heading h2 {
  margin: 0;
}
.section-heading .eyebrow {
  margin-bottom: 5px;
}
.segmented {
  display: flex;
  background: var(--raised);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.segmented button {
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 11px 23px;
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
}
.segmented button[aria-pressed="true"] {
  background: var(--gold);
  color: #17100a;
}
.video-stage {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #182627;
  box-shadow: 0 24px 70px #0003;
}
.video-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-stage:after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(transparent, #0004);
  pointer-events: none;
}
.preview-pill {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #ffffff20;
  border-radius: 100px;
  background: #0006;
  padding: 5px 10px;
  color: #eee;
  font-size: 0.65rem;
}
.preview-pill > span {
  width: 5px;
  height: 5px;
  background: #e4a59c;
  border-radius: 50%;
}
.captions {
  position: absolute;
  bottom: 12%;
  width: 100%;
  text-align: center;
  z-index: 1;
  padding: 0 16px;
  pointer-events: none;
}
.hard-caption {
  font-size: clamp(0.95rem, 2vw, 1.5rem);
  font-weight: 550;
  color: #fff;
  text-shadow: 0 2px 4px #000b;
}
.soft-caption {
  display: table;
  margin: 24px auto 0;
  border-radius: 4px;
  padding: 5px 12px;
  background: #000b;
  color: #fff;
  font-size: clamp(0.85rem, 1.6vw, 1.25rem);
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.hidden-caption {
  opacity: 0;
  transform: translateY(5px);
}
.caption-note {
  font-size: 0.75rem;
  margin: 15px 0 0;
  max-width: 780px;
}
.comparison {
  padding-bottom: 80px;
}
.three-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.features {
  gap: 60px;
}
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff05;
  color: var(--gold);
  margin-bottom: 25px;
}
.features h3 {
  margin-bottom: 14px;
}
.features p {
  font-size: 0.94rem;
  margin-bottom: 0;
}
.section-title {
  margin-bottom: 54px;
}
.section-title h2 {
  margin-bottom: 18px;
}
.section-title p {
  max-width: 680px;
  margin: 20px auto 0;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 38px;
}
.steps .panel {
  position: relative;
  min-height: 220px;
}
.steps h3 {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
  margin-bottom: 16px;
}
.steps p {
  position: relative;
  font-size: 0.87rem;
  margin-bottom: 0;
}
.step-number {
  position: absolute;
  right: 25px;
  top: 18px;
  font-size: 3.2rem;
  color: #ffffff09;
  font-weight: 800;
}
.gold-dot {
  background: var(--gold);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pricing-grid {
  align-items: stretch;
  gap: 28px;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 36px;
}
.pricing-card h3 {
  margin-bottom: 10px;
}
.pricing-card.featured {
  background: var(--raised);
  border: 2px solid var(--gold);
}
.plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #16100a;
  border-radius: 30px;
  white-space: nowrap;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  font-weight: 800;
  padding: 6px 17px;
}
.price {
  font-size: 2.65rem;
  letter-spacing: -0.06em;
  font-weight: 800;
  margin: 6px 0 30px;
}
.price span {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 5px;
}
.featured .price {
  color: var(--gold);
}
.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  flex: 1;
}
.pricing-card li {
  display: flex;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 15px;
}
.pricing-card li span {
  color: var(--gold);
}
.billing-note {
  font-size: 0.73rem;
  line-height: 1.6;
  min-height: 48px;
  margin-bottom: 24px;
}
.status-badge {
  display: inline-block;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 0.75rem;
}
.under-link {
  margin-top: 32px;
  color: var(--gold);
  font-size: 0.9rem;
}
.site-footer {
  border-top: 1px solid var(--line);
  background: #06080b;
  padding: 64px 0 30px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 70px;
  margin-bottom: 64px;
}
.footer-brand {
  max-width: 300px;
}
.footer-brand p {
  font-size: 0.85rem;
  margin-top: 22px;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}
.footer-links h3 {
  font-size: 0.83rem;
  margin-bottom: 24px;
}
.footer-links > div > a {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 16px;
}
.footer-links > div > a:hover {
  color: var(--gold);
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 0.7rem;
}
.launch-status {
  display: flex;
  align-items: center;
  gap: 7px;
}
.launch-status > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.page-shell {
  padding-block: 76px 100px;
}
.page-intro {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 52px;
}
.page-intro h1 {
  font-size: clamp(2rem, 3.5vw, 3.1rem);
  margin-bottom: 22px;
}
.page-intro p {
  max-width: 650px;
  margin-inline: auto;
}
.price-disclaimer {
  margin-bottom: 42px;
}
.compare-note {
  font-size: 0.82rem;
  max-width: 750px;
  margin: 28px auto 0;
}
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 60px;
}
.trial-banner h2 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}
.trial-banner p {
  font-size: 0.85rem;
  margin-bottom: 0;
}
.two-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  max-width: 1000px;
  margin: auto;
}
.start-grid {
  grid-template-areas: "install trial" "activate trial";
  grid-template-rows: auto 1fr;
  row-gap: 0;
}
.start-install {
  grid-area: install;
}
.start-trial {
  grid-area: trial;
  min-width: 0;
}
.start-grid .activation-guide {
  grid-area: activate;
}
.start-install h2,
.form-panel h2,
.activation-guide h2,
.order-panel h2 {
  font-size: 1.25rem;
}
.start-install p {
  font-size: 0.9rem;
}
.activation-guide {
  padding: 32px 12px;
}
.activation-guide a {
  font-size: 0.85rem;
  color: var(--gold);
}
.form-panel {
  padding: 38px;
}
.form-panel label {
  display: block;
  font-size: 0.86rem;
  margin: 24px 0 10px;
}
.form-panel input {
  width: 100%;
  min-height: 50px;
  border: 1px solid #ffffff26;
  background: #090b10;
  border-radius: 9px;
  padding: 12px 15px;
  color: var(--text);
  font-size: 1rem;
}
.form-panel input:disabled {
  opacity: 0.45;
}
.form-panel form > .button {
  margin-top: 26px;
}
.form-message {
  font-size: 0.85rem;
  min-height: 4px;
  margin: 14px 0 0;
}
.form-message.error {
  color: #ffb1a7;
}
.fine-print {
  font-size: 0.75rem;
  line-height: 1.8;
  margin-top: 22px;
}
.form-bottom {
  margin: 24px 0 0;
  padding-top: 23px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}
.form-bottom a,
.text-button {
  color: var(--gold);
}
.text-button {
  padding: 8px 0;
  border: 0;
  background: transparent;
  font-size: 0.85rem;
}
.notice {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 15px 18px;
  border: 1px solid #f3bd6926;
  background: #f3bd6907;
  border-radius: 9px;
  margin: 22px 0;
}
.notice p {
  font-size: 0.82rem;
  line-height: 1.8;
  margin: 0;
}
.notice-dot {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.order-panel {
  margin-bottom: 24px;
}
.order-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
}
.order-line h2 {
  margin-bottom: 0;
}
.order-line strong {
  font-size: 1.7rem;
  color: var(--gold);
}
.order-line small {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
}
.order-panel > p {
  margin-top: 18px;
  font-size: 0.85rem;
}
.order-panel > a {
  color: var(--gold);
  font-size: 0.85rem;
}
.help-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.help-nav a {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 30px;
  color: var(--muted);
  font-size: 0.85rem;
}
.help-nav a:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.contact-panel {
  text-align: center;
}
.contact-panel h2 {
  font-size: 1.5rem;
}
.contact-panel p {
  margin: 0;
}
.contact-panel a {
  color: var(--gold);
}
.policy section {
  margin-bottom: 40px;
}
.policy h2 {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 15px;
}
.policy h2 span {
  font-size: 0.7rem;
  color: var(--gold);
  font-weight: 400;
}
.policy p {
  font-size: 0.95rem;
}
.result-panel {
  text-align: center;
}
.result-symbol {
  font-size: 3rem;
  color: var(--gold);
  margin-bottom: 20px;
}
.result-panel h2 {
  font-size: 1.4rem;
}
.result-panel .button {
  margin-top: 14px;
}
.account-plan {
  font-size: 1.3rem;
  color: var(--gold);
}
.account-panel .actions {
  margin-top: 24px;
}
.account-feedback {
  margin: 18px 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
}
.account-panel .actions + .account-feedback {
  margin-top: 36px;
}
.account-feedback.error {
  color: #ffb1a7;
}
.balance {
  padding: 32px 0;
  display: flex;
  align-items: center;
  gap: 18px;
}
.balance strong {
  font-size: 3rem;
}
.balance span {
  color: var(--muted);
  font-size: 0.9rem;
}
@media (min-width: 801px) {
  .mobile-nav {
    display: none;
  }
}
@media (max-width: 1000px) {
  .header-inner {
    gap: 24px;
  }
  .desktop-nav {
    gap: 18px;
  }
  .header-actions {
    gap: 14px;
  }
  .license-link {
    display: none;
  }
  .pricing-card {
    padding: 28px 22px;
  }
  .features {
    gap: 30px;
  }
  .footer-links {
    gap: 32px;
  }
  .panel {
    padding: 28px;
  }
}
@media (max-width: 800px) {
  .desktop-nav {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .header-inner {
    height: 70px;
  }
  .hero {
    padding-top: 60px;
  }
  .three-grid {
    gap: 18px;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
    gap: 32px;
  }
  .pricing-card {
    padding: 32px;
  }
  .billing-note {
    min-height: 0;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .steps .panel {
    min-height: 0;
  }
  .footer-top {
    gap: 35px;
  }
  .footer-links {
    gap: 26px;
  }
  .two-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
  .start-grid {
    grid-template-areas: "install" "trial" "activate";
    grid-template-rows: auto;
    row-gap: 32px;
  }
  .section {
    padding-block: 64px;
  }
  .page-shell {
    padding-top: 52px;
  }
  .trial-banner {
    max-width: 650px;
    margin-inline: auto;
  }
  .pricing-card li {
    font-size: 0.9rem;
  }
  .features {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .features article {
    max-width: 620px;
  }
  .feature-icon {
    margin-bottom: 18px;
  }
}
@media (max-width: 540px) {
  body .container {
    width: calc(100% - 36px);
  }
  .header-inner {
    gap: 12px;
  }
  .wordmark {
    font-size: 1.4rem;
  }
  .header-actions {
    gap: 12px;
  }
  .header-actions > .button {
    display: none;
  }
  .language select {
    max-width: 96px;
  }
  .hero {
    padding-top: 46px;
    padding-bottom: 42px;
  }
  .hero h1 {
    font-size: 2.4rem;
    line-height: 1.24;
    letter-spacing: -0.035em;
  }
  .hero-intro {
    font-size: 1rem;
    margin-bottom: 28px;
  }
  .hero-label {
    margin-bottom: 22px;
  }
  .actions {
    gap: 12px;
  }
  .hero .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .button {
    font-size: 0.9rem;
    padding: 14px 20px;
    min-height: 50px;
  }
  .trial-note {
    font-size: 0.74rem;
    line-height: 1.8;
  }
  .section-heading h2 {
    font-size: 1.45rem;
  }
  .segmented button {
    padding: 9px 13px;
    font-size: 0.78rem;
  }
  .eyebrow {
    font-size: 0.65rem;
  }
  .video-stage {
    border-radius: 12px;
  }
  .preview-pill {
    top: 10px;
    left: 10px;
    font-size: 0.52rem;
    padding: 4px 7px;
  }
  .captions {
    bottom: 9%;
  }
  .hard-caption {
    font-size: 0.9rem;
  }
  .soft-caption {
    font-size: 0.8rem;
    margin-top: 9px;
    padding: 3px 7px;
  }
  .caption-note {
    font-size: 0.7rem;
  }
  .comparison {
    padding-bottom: 48px;
  }
  .section-title {
    margin-bottom: 38px;
  }
  .section-title p {
    font-size: 0.88rem;
  }
  .panel {
    padding: 26px 22px;
    border-radius: 14px;
  }
  .footer-top {
    flex-direction: column;
    margin-bottom: 38px;
    gap: 30px;
  }
  .footer-brand {
    max-width: 320px;
  }
  .footer-brand p {
    margin-bottom: 0;
  }
  .footer-links {
    gap: 15px;
  }
  .footer-links h3 {
    font-size: 0.8rem;
  }
  .footer-links > div > a {
    font-size: 0.76rem;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 14px;
  }
  .site-footer {
    padding-top: 44px;
  }
  .page-shell {
    padding-bottom: 60px;
  }
  .page-intro {
    margin-bottom: 36px;
  }
  .page-intro p {
    font-size: 0.9rem;
  }
  .trial-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .order-line {
    align-items: start;
    flex-direction: column;
    gap: 12px;
  }
  .help-nav {
    gap: 8px;
    margin-bottom: 40px;
  }
  .help-nav a {
    font-size: 0.78rem;
    padding: 9px 12px;
  }
  .form-panel input {
    font-size: 1rem;
  }
  .pricing-card.featured {
    margin-top: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Viewing story: comparison, explicit rule scopes, then supporting trust. */
.hero h1 { white-space: pre-line; max-width: 1000px; margin-inline: auto; line-height: 1.2; letter-spacing: -.045em; }
.hero { background: radial-gradient(ellipse at 50% 30%, #f3bd6909, transparent 65%); }
.story-lead { padding-top: 34px; margin-bottom: 32px; max-width: 1200px; }
.story-lead h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 16px 0; letter-spacing: -.03em; }
.story-lead p { color: #a9b2c2; max-width: 670px; line-height: 1.8; }
.rule-section { margin-top: 80px; border-block: 1px solid #ffffff10; background: radial-gradient(ellipse at 90% 70%, #f3bd6909, transparent 60%), #0d1016; }
.rule-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 76px; align-items: center; }
.rule-editorial h2 { white-space: pre-line; font-size: clamp(28px, 3vw, 40px); line-height: 1.4; letter-spacing: -.025em; margin: 20px 0; }
.rule-editorial > p { color: #a9b2c2; line-height: 1.9; }
.rule-editorial .rule-priority { color: #f3bd69; margin-top: 32px; font-size: 14px; padding-top: 24px; border-top: 1px solid #ffffff16; }
.rule-demo-label { font-size: 12px; color: #a9b2c2; margin: 0 0 18px; }
.rule-card { background: #151922; border: 1px solid #ffffff16; border-radius: 16px; padding: 26px; }
.rule-card-heading { display: flex; align-items: center; gap: 14px; }
.rule-card h3 { font-size: 18px; margin: 0 0 4px; }
.rule-card p { color: #a9b2c2; font-size: 14px; line-height: 1.75; }
.rule-card-heading p { margin: 0; font-size: 12px; }
.scope-symbol { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid #ffffff20; border-radius: 10px; font-size: 24px; color: #f3bd69; }
.rule-state { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: #090b10; border-radius: 8px; font-size: 14px; }
.rule-state > span:last-child { margin-left: auto; color: #7e8796; text-decoration: line-through; }
.state-dot { width: 6px; height: 6px; border-radius: 50%; background: #7e8796; }
.rule-connector { margin-left: 36px; color: #f3bd69; height: 28px; line-height: 28px; }
.video-rule { margin-left: 30px; border-color: #f3bd6950; box-shadow: 0 16px 60px #0003; }
.rule-options { display: flex; gap: 8px; }
.rule-options button { border: 1px solid #ffffff20; border-radius: 8px; background: #090b10; color: #a9b2c2; padding: 12px; min-height: 44px; flex: 1; font: inherit; font-size: 13px; cursor: pointer; }
.rule-options button[aria-pressed="true"] { background: #f3bd6917; border-color: #f3bd69; color: #f3bd69; }
.rule-result { display: flex; gap: 10px; margin: 18px 0 0 30px; color: #f3bd69; font-size: 13px; line-height: 1.7; min-height: 44px; }
.trust-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding-top: 48px; padding-bottom: 48px; border-bottom: 1px solid #ffffff12; }
.trust-strip article { display: flex; gap: 20px; }
.trust-strip .feature-icon { flex-shrink: 0; }
.trust-strip h3 { font-size: 18px; margin: 0 0 10px; }
.trust-strip p { margin: 0; color: #a9b2c2; font-size: 14px; line-height: 1.8; }
@media (max-width: 800px) {
  .rule-layout { grid-template-columns: 1fr; gap: 28px; }
  .rule-section { margin-top: 48px; }
  .trust-strip { grid-template-columns: 1fr; gap: 30px; }
  .story-lead { padding-top: 16px; }
  .rule-editorial h2 { white-space: normal; }
  .rule-card { padding: 20px; }
  .video-rule { margin-left: 16px; }
  .rule-result { margin-left: 16px; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 32px; }
  .rule-options { flex-direction: column; }
  .rule-card { padding: 16px; }
}

/* Full-width comparison is the primary visual; rules remain a separate story. */
.comparison-label { color: var(--muted); font-size: 16px; }
.rule-section { margin-top: 0; }
.video-rule { margin: 14px 0 0; }
.rule-result { margin-left: 0; }

/* Feature-led homepage: fixed comparison, no drag surface. */
.landing-hero { padding:112px 0 90px; }
.landing-hero h1 { max-width:960px; font-size:clamp(2.4rem,4.5vw,4rem); }
.landing-hero .hero-intro { max-width:770px; }
.watch-comparison { padding-bottom:72px; }
.watch-comparison h2 { text-align:center; margin-bottom:36px; }
.watch-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.watch-half { position:relative; min-width:0; }
.watch-half + .watch-half { border-left:2px solid var(--gold); }
.watch-scene { position:relative; aspect-ratio:8/7; overflow:hidden; background:var(--surface); }
.watch-scene img { width:100%; height:100%; object-fit:cover; display:block; }
.watch-scene:after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.6)); pointer-events:none; }
.watch-caption-stack { position:absolute; z-index:1; left:8px; right:8px; bottom:9%; height:90px; display:flex; flex-direction:column; align-items:center; gap:13px; }
.watch-caption-stack p { color:white; margin:0; font-size:clamp(13px,2vw,25px); line-height:1.4; text-shadow:0 2px 5px #000; text-align:center; }
.watch-hard { font-weight:650; padding:4px 10px; }
.watch-soft { background:#000b; border-radius:3px; padding:4px 10px; }
.watch-caption-stack p:empty { display:none; }
.watch-label { position:absolute; z-index:2; top:20px; left:20px; border:1px solid #ffffff20; background:#090b10cc; border-radius:6px; padding:7px 12px; font-size:12px; }
.watch-label-after { color:var(--bg); background:var(--gold); font-weight:650; }
.watch-rule-label { position:absolute; top:66px; left:20px; right:16px; font-size:12px; color:white; text-shadow:0 1px 4px #000; }
.watch-explanation { text-align:center; min-height:3.6em; margin:25px auto; max-width:740px; font-size:14px; }
.watch-scenarios { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.watch-scenarios button { border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:12px; text-align:left; padding:23px; display:flex; align-items:center; gap:15px; line-height:1.5; }
.watch-scenarios button span { font-size:12px; color:var(--gold); }
.watch-scenarios button[aria-pressed=true] { border-color:var(--gold); color:var(--text); background:#f3bd6909; }
.feature-stories { padding-top:60px; padding-bottom:140px; display:grid; gap:130px; }
.feature-story { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:72px; }
.feature-story:nth-child(even) .feature-copy { order:2; }
.feature-story:nth-child(even) .feature-visual { order:1; }
.feature-copy h2 { margin:20px 0; max-width:490px; font-size:clamp(28px,2.9vw,39px); }
.feature-copy p { font-size:17px; margin:0; }
.feature-visual { min-width:0; min-height:330px; border:1px solid var(--line); border-radius:18px; background:var(--surface); overflow:hidden; position:relative; }
.feature-player .watch-scene { aspect-ratio:16/10; height:100%; min-height:330px; }
.feature-player .watch-caption-stack { bottom:32px; height:45px; }
.feature-player .watch-caption-stack p { font-size:18px; }
.player-control { position:absolute; top:20px; left:20px; right:20px; display:flex; justify-content:space-between; align-items:center; padding:13px 16px; background:#090b10dc; border:1px solid #ffffff20; border-radius:10px; font-size:13px; }
.display-switch { width:32px; height:18px; border-radius:20px; background:var(--gold); position:relative; }
.display-switch:after { content:""; width:12px; height:12px; background:var(--bg); border-radius:50%; position:absolute; top:3px; right:3px; }
.player-progress { position:absolute; bottom:0; left:0; right:0; display:flex; gap:12px; align-items:center; padding:15px; background:#0009; font-size:11px; }
.player-line { flex:1; height:2px; background:linear-gradient(to right,var(--gold) 35%,#ffffff40 35%); }
.feature-caption-detail { padding:30px; background:linear-gradient(155deg,#1f2b31,#10171d); display:flex; flex-direction:column; justify-content:space-between; }
.visual-kicker { font-size:12px; color:var(--muted); letter-spacing:.07em; }
.caption-closeup { display:flex; flex-direction:column; align-items:center; gap:22px; margin:35px 0; font-size:clamp(18px,2vw,26px); color:white; }
.removed-caption { background:#090b10b0; padding:7px 13px; position:relative; color:#a9b2c2; text-decoration:line-through; }
.removed-caption i { position:absolute; top:-12px; right:-12px; width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--gold); border-radius:50%; background:var(--surface); color:var(--gold); font:16px system-ui; }
.feature-caption-detail>p { font-size:12px; margin:0; display:flex; align-items:center; gap:9px; }
.channel-visual { padding:30px; display:flex; flex-direction:column; justify-content:center; gap:15px; }
.channel-row { display:flex; align-items:center; gap:12px; padding:16px 12px; border-bottom:1px solid var(--line); font-size:13px; }
.channel-row:last-child { border-bottom:0; }
.channel-row strong { flex:1; font-weight:500; }
.channel-row>span:last-child { font-size:11px; color:var(--muted); }
.channel-row>span.value-on { color:var(--gold); }
.channel-avatar { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:8px; color:#b9d3c7; background:#243931; }
.avatar-1 { color:#ead19e; background:#3a3020; }.avatar-2 { color:#a7c1e6; background:#233347; }
.exception-visual { padding:35px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.inherited-rule { display:flex; gap:24px; align-items:center; font-size:12px; color:var(--muted); }
.inherited-rule strong { font-weight:400; padding:5px 10px; background:#ffffff07; border:1px solid var(--line); border-radius:5px; }
.inherit-line { color:var(--gold); font-size:26px; margin:15px; }
.video-exception { width:100%; display:flex; align-items:center; gap:15px; border:1px solid #f3bd6960; border-radius:10px; padding:18px; background:#f3bd6907; }
.exception-thumb { color:var(--gold); background:#f3bd6912; padding:15px; border-radius:8px; }
.video-exception>div:nth-child(2) { display:grid; gap:8px; font-size:12px; flex:1; }
.video-exception strong { color:var(--gold); font-size:15px; }.exception-cc { font-size:12px; color:var(--gold); }
.exception-visual>p { font-size:12px; margin:22px 0 0; }
.other-features h2 { text-align:center; margin-bottom:55px; }
.other-feature-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:30px; }
.other-feature-list h3 { font-size:16px; margin:22px 0 10px; }.other-feature-list p { font-size:13px; }
.faq-section { border-top:1px solid var(--line); background:#12151c50; }
.testimonials blockquote { margin:0 0 25px; line-height:1.8; }.testimonials figcaption { display:grid; gap:7px; }.testimonials figcaption span { color:var(--muted); font-size:13px; }
@media(max-width:900px){.feature-story{gap:35px}.feature-stories{gap:80px}.feature-visual{min-height:290px}.other-feature-list{grid-template-columns:repeat(3,minmax(0,1fr))}.channel-visual,.exception-visual{padding:20px}.watch-scenarios button{padding:16px;gap:10px}}
@media(max-width:640px){.landing-hero{padding:64px 0 55px}.watch-comparison h2{font-size:25px}.watch-label{top:12px;left:10px;padding:5px 8px;font-size:10px}.watch-rule-label{top:45px;left:10px;font-size:10px}.watch-scene{aspect-ratio:3/5}.watch-caption-stack{height:70px;bottom:8%;gap:10px}.watch-caption-stack p{font-size:12px;padding:4px}.watch-pair{border-radius:12px}.watch-scenarios{gap:8px}.watch-scenarios button{padding:14px 9px;display:grid;gap:7px;font-size:12px}.watch-explanation{font-size:13px}.watch-comparison{padding-bottom:35px}.feature-stories{padding-top:25px;padding-bottom:75px;gap:65px}.feature-story{grid-template-columns:1fr;gap:26px}.feature-story:nth-child(even) .feature-copy{order:0}.feature-story:nth-child(even) .feature-visual{order:0}.feature-copy h2{font-size:29px;margin:14px 0}.feature-copy p{font-size:15px}.feature-visual{min-height:280px}.other-feature-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}.other-feature-list h3{font-size:15px}.channel-row{padding:15px 6px;gap:9px}.video-exception{padding:13px;gap:10px}.feature-player .watch-scene{min-height:280px}}
.feature-player .watch-scene { width:100%; height:350px; min-height:0; aspect-ratio:auto; }
.watch-rule-label { width:fit-content; max-width:calc(100% - 30px); padding:4px 7px; background:#090b10c9; border-radius:4px; text-shadow:none; }
@media(max-width:640px){.feature-player .watch-scene{height:280px}}

@media (max-width:360px) { .landing-hero h1 { font-size:28px; } }

.wordmark img { width: 32px; height: 32px; flex-shrink: 0; }
@media (max-width: 480px) { .wordmark { gap: 7px; font-size: 1.2rem; } .wordmark img { width: 27px; height: 27px; } }

/* Align the glyphs optically without moving the icon or changing its gap. */
.wordmark > span { display: block; line-height: 1; transform: translateY(-1px); }

/* Account management uses a compact reading layout, separate from marketing heroes. */
.container.license-shell { max-width: 1000px; padding-block: 48px 80px; }
.license-heading { margin-bottom: 30px; }
.license-heading h1 { font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1.3; margin: 0 0 10px; }
.license-heading p { margin: 0; font-size: .95rem; }
.account-dashboard { display: grid; gap: 24px; }
.account-dashboard .panel { padding: 28px; border-radius: 16px; }
.account-identity { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 4px; }
.account-identity > div { min-width: 0; }
.account-label, .account-facts dt { color: var(--muted); font-size: .8rem; }
.account-identity p { margin: 4px 0 0; color: var(--text); overflow-wrap: anywhere; }
.account-signout { flex-shrink: 0; font-size: .85rem; }
.account-dashboard h2 { font-size: 1.1rem; margin: 0; }
.account-card-heading, .account-record-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.account-badge { display: inline-block; font-size: .75rem; line-height: 1.5; padding: 4px 10px; border-radius: 6px; background: #ffffff0a; color: var(--muted); }
.account-badge.is-active { background: #f5be5d16; color: var(--gold); }
.account-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin: 24px 0 0; }
.account-facts > div { min-width: 0; }
.account-facts dt { margin-bottom: 7px; }
.account-facts dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.account-facts strong { font-size: 1.2rem; font-weight: 600; }
.account-benefits { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 22px; }
.account-benefits h3 { font-size: .85rem; font-weight: 500; color: var(--muted); margin: 0 0 12px; }
.account-benefits ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; padding-inline-start: 18px; margin: 0; font-size: .85rem; }
.account-benefits li::marker { color: var(--gold); }
.account-record { padding-block: 24px; border-top: 1px solid var(--line); margin-top: 24px; }
.account-record:last-of-type { padding-bottom: 0; }
.account-record h3 { margin: 0; font-size: .95rem; }
.account-record .button { margin-top: 20px; font-size: .85rem; }
.account-status { color: var(--muted); font-size: .8rem; }
.account-reference { font-size: .78rem; font-variant-numeric: tabular-nums; }
.account-empty { margin: 24px 0 0; font-size: .9rem; }
.account-auth-content > p { font-size: .9rem; }
.account-login h2 { margin-bottom: 12px; }
.account-login .account-email { color: var(--text); overflow-wrap: anywhere; }
.account-login .login-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 24px; }
.account-login .login-actions .button { white-space: normal; }
.account-login .text-button { min-height: 36px; line-height: 1.35; }
.account-connect p { font-size: .9rem; }
.account-dashboard > .account-feedback { margin: 0; }
@media (max-width: 600px) {
  .container.license-shell { padding-block: 30px 48px; }
  .account-dashboard { gap: 18px; }
  .account-dashboard .panel, .account-login { padding: 20px; }
  .account-identity { align-items: flex-start; gap: 12px; }
  .account-facts, .account-benefits ul { grid-template-columns: 1fr; gap: 16px; }
  .account-facts strong { font-size: 1.1rem; }
}

.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-y-0{top:0;bottom:0}.-left-\[35px\]{left:-35px}.left-0{left:0}.right-4{right:1rem}.top-0{top:0}.top-1\/2{top:50%}.isolate{isolation:isolate}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-3{margin-left:.75rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-1\.5{height:.375rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\[80px\]{height:80px}.min-h-screen{min-height:100vh}.w-1\.5{width:.375rem}.w-6{width:1.5rem}.w-full{width:100%}.min-w-\[820px\]{min-width:820px}.max-w-\[1000px\]{max-width:1000px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1240px\]{max-width:1240px}.max-w-\[320px\]{max-width:320px}.max-w-\[480px\]{max-width:480px}.max-w-\[540px\]{max-width:540px}.max-w-\[600px\]{max-width:600px}.max-w-\[800px\]{max-width:800px}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1\.5{gap:.375rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.text-wrap{text-wrap:wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-\[\#F3BD69\]{--tw-border-opacity:1;border-color:rgb(243 189 105/var(--tw-border-opacity,1))}.border-\[\#F3BD69\]\/40{border-color:hsla(37,85%,68%,.4)}.border-gold{--tw-border-opacity:1;border-color:rgb(243 189 105/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-white\/5{border-color:hsla(0,0%,100%,.05)}.bg-\[\#06080B\]{--tw-bg-opacity:1;background-color:rgb(6 8 11/var(--tw-bg-opacity,1))}.bg-\[\#090B10\]{--tw-bg-opacity:1;background-color:rgb(9 11 16/var(--tw-bg-opacity,1))}.bg-\[\#12151C\]{--tw-bg-opacity:1;background-color:rgb(18 21 28/var(--tw-bg-opacity,1))}.bg-\[\#12151C\]\/30{background-color:rgba(18,21,28,.3)}.bg-\[\#1A1E28\]{--tw-bg-opacity:1;background-color:rgb(26 30 40/var(--tw-bg-opacity,1))}.bg-\[\#F3BD69\],.bg-gold{--tw-bg-opacity:1;background-color:rgb(243 189 105/var(--tw-bg-opacity,1))}.bg-raised{--tw-bg-opacity:1;background-color:rgb(26 30 40/var(--tw-bg-opacity,1))}.bg-surface{--tw-bg-opacity:1;background-color:rgb(18 21 28/var(--tw-bg-opacity,1))}.bg-surface\/20{background-color:rgba(18,21,28,.2)}.bg-transparent{background-color:transparent}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-40{padding-top:10rem;padding-bottom:10rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-16{padding-bottom:4rem}.pb-6{padding-bottom:1.5rem}.pl-10{padding-left:2.5rem}.pl-3\.5{padding-left:.875rem}.pl-6{padding-left:1.5rem}.pr-4{padding-right:1rem}.pt-10{padding-top:2.5rem}.pt-2{padding-top:.5rem}.pt-20{padding-top:5rem}.pt-24{padding-top:6rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#090B10\]{--tw-text-opacity:1;color:rgb(9 11 16/var(--tw-text-opacity,1))}.text-\[\#A9B2C2\]{--tw-text-opacity:1;color:rgb(169 178 194/var(--tw-text-opacity,1))}.text-\[\#A9B2C2\]\/40{color:rgba(169,178,194,.4)}.text-\[\#A9B2C2\]\/50{color:rgba(169,178,194,.5)}.text-\[\#F3BD69\],.text-gold{--tw-text-opacity:1;color:rgb(243 189 105/var(--tw-text-opacity,1))}.text-muted{--tw-text-opacity:1;color:rgb(169 178 194/var(--tw-text-opacity,1))}.text-muted\/40{color:rgba(169,178,194,.4)}.text-muted\/60{color:rgba(169,178,194,.6)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/90{color:hsla(0,0%,100%,.9)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-\[\#A9B2C2\]\/30::-moz-placeholder{color:rgba(169,178,194,.3)}.placeholder-\[\#A9B2C2\]\/30::placeholder{color:rgba(169,178,194,.3)}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-gold\/10{--tw-shadow-color:hsla(37,85%,68%,.1);--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:translate-y-\[-2px\]:hover{--tw-translate-y:-2px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-\[\#f4c884\]:hover{--tw-bg-opacity:1;background-color:rgb(244 200 132/var(--tw-bg-opacity,1))}.hover\:bg-gold\/90:hover{background-color:hsla(37,85%,68%,.9)}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:text-\[\#F3BD69\]:hover,.hover\:text-gold:hover{--tw-text-opacity:1;color:rgb(243 189 105/var(--tw-text-opacity,1))}.hover\:text-muted:hover{--tw-text-opacity:1;color:rgb(169 178 194/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.focus\:border-gold\/30:focus{border-color:hsla(37,85%,68%,.3)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.group[open] .group-open\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:640px){.sm\:flex{display:flex}.sm\:w-auto{width:auto}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:gap-20{gap:5rem}.sm\:gap-24{gap:6rem}}@media (min-width:768px){.md\:flex{display:flex}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:py-20{padding-top:5rem}.md\:pb-20,.md\:py-20{padding-bottom:5rem}.md\:pb-24{padding-bottom:6rem}.md\:pt-24{padding-top:6rem}.md\:pt-32{padding-top:8rem}}@media (min-width:1024px){.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:ml-auto{margin-left:auto}.lg\:max-w-\[440px\]{max-width:440px}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Visual rules from Superdesign homepage v51. */


/* Tailwind's draft baseline, scoped so legacy pages keep their own defaults. */
:where(.sd-design, .sd-design *) { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
:where(.sd-design) :is(h1,h2,h3,h4,p,figure,blockquote,dl,dd) { margin: 0; }
:where(.sd-design) :is(ul,ol) { list-style: none; margin: 0; padding: 0; }
:where(.sd-design) p { line-height: inherit; }
:where(.sd-design) :is(button,input,select) { font: inherit; color: inherit; }
:where(.sd-design) button { background: transparent; padding: 0; }
:where(.sd-design) :is(img,svg) { display: block; vertical-align: middle; }
:where(.sd-design) img { max-width: 100%; height: auto; }
:where(.sd-design) table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
.sd-design { color: #f5f7fa; line-height: 1.5; }
.sd-design .sd-fragment { display: contents; }
    body {
      font-family: Inter, 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
      background: #090B10;
      color: #F5F7FA;
      margin: 0;
      -webkit-font-smoothing: antialiased;
    }
    @view-transition { navigation: auto; }
    html { background-color: #090B10; scroll-padding-top: 80px; }
    ::view-transition { background-color: #090B10; }
    ::view-transition-old(main-nav), ::view-transition-new(main-nav),
    ::view-transition-old(footer), ::view-transition-new(footer) {
      animation: none;
      mix-blend-mode: normal;
    }
    ::view-transition-old(main-content) {
      animation: 0.25s ease-out both fade-out;
    }
    ::view-transition-new(main-content) {
      animation: 0.25s ease-in 0.1s both fade-in;
    }
    @keyframes fade-out {
      from { opacity: 1; }
      to { opacity: 0; }
    }
    @keyframes fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    header { view-transition-name: main-nav; }
    .site-header {
      background-color: #090B10;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
      transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .site-header::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(110deg, rgba(255, 255, 255, .045), transparent 48%, rgba(255, 255, 255, .025));
      transition: opacity .22s ease;
    }
    .site-header.is-scrolled {
      background-color: rgba(18, 23, 32, .68);
      border-bottom-color: rgba(255, 255, 255, .15);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 28px rgba(0, 0, 0, .17);
      -webkit-backdrop-filter: blur(16px) saturate(145%);
      backdrop-filter: blur(16px) saturate(145%);
    }
    .site-header.is-scrolled::before { opacity: 1; }
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
      .site-header.is-scrolled { background-color: #141922; }
    }
    footer { view-transition-name: footer; }
    main { view-transition-name: main-content; }
    h1, h2, h3 { color: #F5F7FA; text-wrap: balance; }
    h1 {
      font-size: clamp(2.35rem, 4.4vw, 3.8rem);
      letter-spacing: -0.045em;
      line-height: 1.17;
      font-weight: 750;
    }
    .hero-title { font-size: clamp(3.2rem, 5.7vw, 5.25rem) !important; line-height: 1.13 !important; font-weight: 750 !important; letter-spacing: -.055em !important; max-width: 1100px; margin-left: auto; margin-right: auto; }
    h2 {
      font-size: clamp(1.6rem, 2.6vw, 2.25rem);
      letter-spacing: -0.035em;
      line-height: 1.3;
    }
    .text-gold { color: #F3BD69; }
    .bg-gold { background-color: #F3BD69; }
    .border-gold { border-color: #F3BD69; }
    .bg-surface { background-color: #12151C; }
    .bg-raised { background-color: #1A1E28; }
    .text-muted { color: #A9B2C2; }
    .effect-wrap { max-width: 1240px; margin: 0 auto; }
    .effect-heading { margin: 0 0 38px; text-align: left; }
    .effect-heading h2 { margin: 0 0 14px; font-size: clamp(30px, 3vw, 44px); }
    .effect-stage { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: #111b27; box-shadow: 0 34px 80px rgba(0,0,0,.4); isolation: isolate; }
    .effect-scene { position: absolute; inset: -3%; background-image: var(--scene-image); background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(1); transition: background-image 0.4s ease; }
    .effect-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.13),transparent 43%,rgba(0,0,0,.3)); }
    .effect-hard,.effect-soft { position: absolute; left: 4%; right: 4%; z-index: 2; color: #fff; text-align: center; white-space: pre-wrap; pointer-events: none; }
    .effect-hard { bottom: 12%; font: 600 clamp(15px,2.5vw,30px)/1.3 'Noto Sans SC',sans-serif; text-shadow: 0 2px 4px #000,0 0 2px #000; }
    .effect-hard span { display: inline-block; }
    .effect-soft { bottom: 12%; font: 400 clamp(15px,2.45vw,29px)/1.35 Roboto,Arial,'Noto Sans SC',sans-serif; transition: opacity .65s ease,transform .65s ease,filter .65s ease; }
    .effect-soft span { display: inline-block; padding: 4px 13px; border-radius: 2px; background: rgba(0,0,0,.72); }
    #main-stage .effect-hard { bottom: 20%; }
    #main-stage .effect-soft { bottom: 10%; }
    .effect-stage[data-phase="subtitle-out"] .effect-soft,.effect-stage[data-phase="clean"] .effect-soft { opacity: 0; transform: translateY(10px); filter: blur(6px); }
    .effect-tip { display: none; position: absolute; z-index: 5; top: 24px; right: 24px; box-sizing: border-box; width: max-content; max-width: min(380px,calc(100% - 48px)); padding: 12px 14px; border-radius: 10px; background: rgba(17,24,39,.96); color: #fff; font: 14px/1.45 system-ui,sans-serif; box-shadow: 0 8px 30px rgba(0,0,0,.32); text-align: left; transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s; }
    .effect-stage[data-phase="tip"] .effect-tip[data-visible="true"],.effect-stage[data-phase="tip-focus"] .effect-tip[data-visible="true"],.effect-stage[data-phase="subtitle-focus"] .effect-tip[data-visible="true"],.effect-stage[data-phase="subtitle-out"] .effect-tip[data-visible="true"] { display: block; }
    .effect-tip-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 10px; }
    .effect-countdown { position: relative; width: 24px; height: 24px; flex: 0 0 24px; margin-right: auto; color: rgba(255,255,255,.82); }
    .effect-countdown svg { display: block; width: 24px; height: 24px; }
    .effect-countdown-label { position: absolute; inset: 0; display: grid; place-items: center; font: 600 9px/1 system-ui,sans-serif; font-variant-numeric: tabular-nums; }
    .effect-restore { order: 2; border: 1px solid #fff; border-radius: 7px; padding: 5px 9px; cursor: pointer; background: #fff; color: #111827; font: 600 12px/1.2 system-ui,sans-serif; white-space: nowrap; }
    .effect-restore.secondary { order: 1; background: transparent; color: #fff; border-color: rgba(255,255,255,.44); font-weight: 500; }
    .effect-restore:focus-visible,.effect-replay:focus-visible { outline: 2px solid #f3bd69; outline-offset: 3px; }
    .effect-player-chrome { position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; height: 48px; background: linear-gradient(transparent,rgba(0,0,0,.78)); pointer-events: none; }
    .effect-cc-icon { position: absolute; right: 24px; bottom: 12px; display: block; width: 25px; height: 25px; opacity: 1; transition: opacity 0.2s; }
    .effect-cc-icon img { display: block; width: 100%; height: 100%; border-radius: 5px; }
    .effect-stage[data-cc="off"] .effect-cc-icon { opacity: 0.5; }
    /* This editorial frame belongs to the page; the notification remains at its real player position. */
    .focus-lens { position:absolute; z-index:6; left:0; top:0; width:0; height:0; opacity:0; pointer-events:none; box-sizing:border-box; border:1px solid rgba(243,189,105,.18); border-radius:0; box-shadow:0 0 0 200vmax rgba(4,7,12,.46),inset 0 0 32px rgba(243,189,105,.035),0 0 28px rgba(243,189,105,.2); transition:left 1.2s cubic-bezier(.22,1,.36,1),top 1.2s cubic-bezier(.22,1,.36,1),width 1.2s cubic-bezier(.22,1,.36,1),height 1.2s cubic-bezier(.22,1,.36,1),opacity .65s ease; }
    .effect-stage[data-phase="tip-focus"] .focus-lens,.effect-stage[data-phase="subtitle-focus"] .focus-lens,.effect-stage[data-phase="subtitle-out"] .focus-lens { opacity:1; }
    .effect-stage[data-phase="plugin-icon-focus"] .focus-lens,.effect-stage[data-phase="plugin-menu-focus"] .focus-lens { opacity:1; }
    .effect-stage[data-phase="plugin-menu-focus"] .focus-lens { z-index:10; }
    .focus-lens::after { content:""; position:absolute; left:0; top:-1px; width:18%; height:1px; opacity:0; background:linear-gradient(90deg,transparent,#fff0ca,transparent); box-shadow:0 0 10px #f3bd69; pointer-events:none; }
    .effect-stage[data-phase="tip-focus"] .focus-lens::after { animation:lens-glint 1.7s ease-out both; }
    .effect-stage[data-phase="subtitle-focus"] .focus-lens::after { animation:lens-glint-soft 1.7s ease-out both; }
    .effect-stage[data-phase="plugin-icon-focus"] .focus-lens::after { animation:lens-glint 1.7s ease-out both; }
    .effect-stage[data-phase="plugin-menu-focus"] .focus-lens::after { animation:lens-glint-soft 1.7s ease-out both; }
    @keyframes lens-glint { 0% { left:0; opacity:0; } 15% { opacity:.75; } 80% { opacity:.55; } 100% { left:82%; opacity:0; } }
    @keyframes lens-glint-soft { 0% { left:0; opacity:0; } 15% { opacity:.75; } 80% { opacity:.55; } 100% { left:82%; opacity:0; } }
    .focus-corner { position:absolute; width:20px; height:20px; border:0 solid #f3bd69; filter:drop-shadow(0 0 5px rgba(243,189,105,.62)); }
    .focus-corner.tl { top:-2px; left:-2px; border-top-width:2px; border-left-width:2px; }
    .focus-corner.tr { top:-2px; right:-2px; border-top-width:2px; border-right-width:2px; }
    .focus-corner.bl { bottom:-2px; left:-2px; border-bottom-width:2px; border-left-width:2px; }
    .focus-corner.br { bottom:-2px; right:-2px; border-bottom-width:2px; border-right-width:2px; }
    .focus-note { position:absolute; z-index:7; display:flex; align-items:center; gap:10px; min-height:37px; max-width:250px; box-sizing:border-box; padding:8px 12px; color:#f5efe4; background:rgba(13,17,24,.88); border:1px solid rgba(243,189,105,.24); border-radius:5px; box-shadow:0 10px 28px rgba(0,0,0,.27); font:500 12px/1.35 'Noto Sans SC',system-ui,sans-serif; letter-spacing:.02em; opacity:0; transform:translateY(6px); pointer-events:none; transition:left 1.2s cubic-bezier(.22,1,.36,1),top 1.2s cubic-bezier(.22,1,.36,1),opacity .65s ease,transform .4s ease; }
    .focus-note-index { color:#f3bd69; font:700 10px/1 system-ui,sans-serif; letter-spacing:.1em; }
    .effect-stage[data-phase="tip-focus"] .focus-note,.effect-stage[data-phase="subtitle-focus"] .focus-note,.effect-stage[data-phase="subtitle-out"] .focus-note { opacity:1; transform:translateY(0); }
    .effect-stage[data-phase="plugin-icon-focus"] .focus-note,.effect-stage[data-phase="plugin-menu-focus"] .focus-note { opacity:1; transform:translateY(0); }
    .effect-stage[data-phase="plugin-menu-focus"] .focus-note { z-index:11; }
    .effect-stage[data-phase="clean"] :is(.focus-lens,.focus-note) { transition:opacity .3s ease,transform .3s ease; }
    #main-stage[data-scene="plugin"][data-phase="clean"] .focus-lens { z-index:10; }
    #main-stage[data-scene="plugin"][data-phase="clean"] .focus-note { z-index:11; }
    #main-stage[data-scene="plugin"] :is(.effect-soft,.effect-tip,.effect-cc-icon) { display:none !important; }
    #main-stage[data-scene="plugin"] .effect-hard { z-index:7; }
    .effect-plugin-icon { display:none; position:absolute; z-index:8; right:24px; bottom:12px; width:25px; height:25px; padding:0; border:0; border-radius:5px; background:transparent; cursor:pointer; }
    #main-stage[data-scene="plugin"] .effect-plugin-icon { display:grid; place-items:center; }
    .effect-plugin-icon img { display:block; width:100%; height:100%; object-fit:contain; }
    .effect-plugin-icon:hover,.effect-plugin-icon[aria-expanded="true"] { background:rgba(255,255,255,.18); }
    .effect-plugin-icon:focus-visible,.plugin-menu-row:focus-visible,.plugin-menu-back:focus-visible { outline:2px solid #f3bd69; outline-offset:2px; }
    .effect-plugin-menu { position:absolute; z-index:9; right:12px; bottom:62px; box-sizing:border-box; width:min(420px,calc(100% - 24px)); max-height:calc(100% - 74px); overflow:auto; border-radius:12px; background:rgba(24,24,24,.96); color:#fff; box-shadow:0 16px 36px rgba(0,0,0,.5); font:500 13px/1.4 Roboto,Arial,'Noto Sans SC',sans-serif; text-align:start; }
    .effect-plugin-menu[hidden],.plugin-menu-panel[hidden],.plugin-menu-feedback[hidden] { display:none !important; }
    .plugin-menu-row,.plugin-menu-status,.plugin-menu-back { display:grid; grid-template-columns:36px minmax(0,1fr) max-content; align-items:center; gap:8px; box-sizing:border-box; width:100%; min-height:48px; padding:8px 10px; border:0; background:none; color:inherit; font:inherit; text-align:start; }
    .plugin-menu-row { cursor:pointer; }
    .plugin-menu-row:hover,.plugin-menu-back:hover { background:rgba(255,255,255,.12); }
    .plugin-menu-row[aria-disabled="true"] { color:#a7a7a7; cursor:default; }
    .plugin-menu-row[aria-disabled="true"]:hover { background:none; }
    .plugin-menu-label { min-width:0; overflow-wrap:anywhere; }
    .plugin-menu-panel[data-plugin-panel="main"] .plugin-menu-label { white-space:nowrap; }
    .plugin-menu-row-icon { display:grid; place-items:center; width:36px; height:24px; }
    .plugin-menu-row-icon svg { display:block; width:22px; height:22px; }
    .plugin-menu-value { min-width:0; color:#c5c5c5; font-size:12px; text-align:end; overflow-wrap:anywhere; }
    .plugin-menu-panel[data-plugin-panel="main"] .plugin-menu-value { white-space:nowrap; }
    .plugin-menu-toggle { justify-self:end; display:block; width:36px; height:20px; border-radius:99px; background:#858585; position:relative; }
    .plugin-menu-toggle::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; }
    .plugin-menu-toggle[data-state="on"] { background:rgba(255,255,255,.3); }
    .plugin-menu-toggle[data-state="on"]::after { transform:translateX(16px); }
    .plugin-menu-arrow { color:#d5d5d5; font-size:24px; line-height:1; }
    .plugin-menu-row:has(.plugin-menu-arrow) { grid-template-columns:36px minmax(0,1fr) max-content 10px; gap:5px; }
    .plugin-menu-back { grid-template-columns:24px minmax(0,1fr); cursor:pointer; border-bottom:1px solid rgba(255,255,255,.12); font-weight:600; }
    .plugin-menu-back span { font-size:24px; line-height:1; }
    .plugin-menu-check { width:20px; color:#fff; text-align:center; }
    .plugin-menu-feedback { display:block; padding:8px 15px; color:#f3bd69; font-size:12px; }
    .effect-plugin-menu[dir="rtl"] :is(.plugin-menu-row,.plugin-menu-status,.plugin-menu-back) { direction:rtl; }
    .effect-toolbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 28px 0 0; }
    .effect-tab { padding: 11px 19px; color: #a9b2c2; background: #151922; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: 15px; font-weight: 550; cursor: pointer; transition: color .2s, background .2s, border-color .2s; white-space: nowrap; }
    .effect-tab[aria-selected="true"] { color: #17120a; border-color: #F3BD69; background: #F3BD69; }
    .effect-tab:focus-visible,.option-btn:focus-visible,.rule-video:focus-visible { outline: 2px solid #F3BD69; outline-offset: 3px; }
    @media(max-width:650px) { .hero-title { font-size: clamp(2.55rem, 9.2vw, 3.5rem) !important; } .effect-stage { border-radius: 8px; } .effect-tip { top: 9px; right: 9px; max-width: min(300px,calc(100% - 18px)); padding: 8px 9px; font-size: 11px; } .focus-corner { width:15px; height:15px; } .focus-note { max-width:190px; min-height:27px; padding:5px 7px; gap:6px; font-size:9px; } .effect-tip-actions { margin-top: 5px; } .effect-restore { padding: 4px 7px; font-size: 10px; } .effect-hard { bottom: 15%; font-size: 14px; } .effect-soft { bottom: 15%; font-size: 14px; } #main-stage .effect-hard { bottom: 23%; } #main-stage .effect-soft { bottom: 9%; } .effect-soft span { padding: 1px 5px; } .effect-player-chrome { height: 35px; } .effect-cc-icon { right: 12px; bottom: 8px; width: 20px; height: 20px; } .effect-toolbar { gap: 8px; padding-top: 18px; } .effect-tab { padding: 8px 12px; font-size: 12px; } }
    @media(max-width:650px) { #main-stage[data-scene="plugin"] { aspect-ratio:auto; height:320px; } .effect-plugin-icon { right:12px; bottom:8px; width:20px; height:20px; } .effect-plugin-menu { right:8px; bottom:40px; width:min(350px,calc(100% - 16px)); max-height:calc(100% - 46px); font-size:11px; } .plugin-menu-row,.plugin-menu-status,.plugin-menu-back { min-height:34px; padding:5px 8px; grid-template-columns:18px minmax(0,1fr) auto; gap:5px; } .plugin-menu-row:has(.plugin-menu-arrow) { grid-template-columns:18px minmax(0,1fr) auto 9px; } .plugin-menu-row-icon { width:18px; } .plugin-menu-row-icon svg { width:17px; height:17px; } .plugin-menu-value { max-width:none; font-size:10px; } }
    @media(max-width:650px) { #main-stage[data-scene="plugin"] .effect-hard { bottom:12px; } }

    .feature-showcase { max-width:1240px; margin:0 auto; padding:180px 24px 250px; display:flex; flex-direction:column; gap:280px; }
    .story { display:grid; grid-template-columns: 5fr 7fr; align-items:center; gap:8%; }
    .story-close { grid-template-columns: 7fr 5fr; }
    .story-copy { max-width: 480px; }
    .story-kicker { color:#F3BD69; display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:700; letter-spacing:.08em; margin-bottom:24px; }
    .kicker-line { width:30px; height:1px; background:#F3BD69; display:inline-block; }
    .story-copy h2 { font-size:clamp(32px,3.3vw,44px); line-height:1.25; letter-spacing:-.045em; font-weight:750; margin:0 0 20px; }
    .story-copy p { color:#A9B2C2; font-size:16px; line-height:1.75; margin:0; }

    .visual-block { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #11151c; }
    .visual-video { aspect-ratio: 16/9; background-size: cover; background-position: center; position: relative; }
    .visual-ui { position: absolute; z-index: 10; }

    .v-open-video { background-image: var(--scene-image); }
    .v-lang-video { background-image: var(--scene-image); }
    .auto-caption { opacity: 0; transform: translateY(8px); }
    .visual-block[data-captions="on"] .auto-caption { opacity: 1; transform: translateY(0); }
    .visual-block[data-captions="off"] .auto-cc { opacity: .45; }
    .visual-caption-control { position: absolute; z-index: 4; top: 18px; left: 18px; display: flex; gap: 10px; align-items: center; }
    .visual-caption-control button { min-height: 38px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 7px; background: rgba(9,11,16,.82); color: #fff; cursor: pointer; }
    .visual-caption-control span { padding: 7px 10px; border-radius: 6px; background: rgba(9,11,16,.82); color: #fff; font-size: 12px; }

    .options-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
    .option-btn { flex: 0 0 auto; white-space: nowrap; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: #a9b2c2; font-size: 14px; cursor: pointer; transition: all 0.2s; }
    .option-btn.active { background: rgba(243,189,105,.1); border-color: #f3bd69; color: #f3bd69; }

    .rule-tree { display: flex; flex-direction: column; gap: 0; margin-top: 32px; padding: 9px; border-radius: 12px; background: rgba(24,24,24,.96); box-shadow: 0 16px 40px rgba(0,0,0,.28); }
    .rule-node { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 12px; color: #f1f1f1; }
    .rule-node + .rule-node { border-top: 1px solid rgba(255,255,255,.045); }
    .rule-node-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #f1f1f1; flex: 0 0 32px; }
    .rule-node-icon svg { width: 24px; height: 24px; }
    .rule-node-content { flex: 1; }
    .rule-node-title { font-size: 14px; font-weight: 500; color: #fff; }
    .rule-node-desc { display: none; }
    .rule-node-status { font-size: 13px; font-weight: 400; color: #aaa; text-align: right; }
    .rule-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 24px; padding: 12px; }
    .rule-video { min-height: 66px; text-align: left; padding: 12px 14px; border-radius: 9px; border: 1px solid rgba(255,255,255,.13); background: #12151C; color: #F5F7FA; cursor: pointer; }
    .rule-video[aria-pressed="true"] { border-color: #F3BD69; background: rgba(243,189,105,.08); }
    .rule-video small { display: block; margin-top: 4px; color: #A9B2C2; }
    .rule-node[data-active="true"] { background: rgba(243,189,105,.07); border-radius: 7px; }
    .rule-node[data-active="true"] .rule-node-status { color: #F3BD69; }
    .rule-choices { padding-bottom: 4px; }
    .privacy-story { max-width: 1240px; margin: 0 auto; padding: 0 24px 230px; grid-template-columns: 7fr 5fr; }
    .privacy-points { display: flex; flex-direction: column; }
    .privacy-point { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
    .privacy-point:first-child { border-top: 1px solid rgba(255,255,255,.12); }
    .privacy-point-number { color: #F3BD69; font-size: 13px; font-weight: 700; letter-spacing: .08em; padding-top: 4px; }
    .privacy-point strong { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 600; }
    .privacy-point span:last-child { display: block; color: #A9B2C2; font-size: 14px; line-height: 1.7; }
    .pricing-heading { margin: 0 0 40px; text-align: center; font-size: clamp(36px,4.2vw,56px); line-height: 1.2; font-weight: 750; letter-spacing: -.035em; }
    .sd-design .plan-subscription-card { background: #1c202b; border-color: #f3bd69; }
    .plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; margin-bottom: 18px; }
    .plan-card-head h3 { margin: 0; font-size: 18px; line-height: 1.4; white-space: nowrap; }
    .plan-savings { position: relative; flex: 0 1 auto; min-width: 0; }
    .plan-savings-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; padding: 5px 7px; border: 1px solid rgba(243,189,105,.45); border-radius: 7px; background: rgba(243,189,105,.1); color: #f3bd69; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.35; cursor: help; }
    .plan-savings-trigger span { white-space: normal; text-align: center; }
    .plan-savings-trigger iconify-icon, .plan-savings-trigger .sd-icon { flex: 0 0 auto; width: 13px; height: 13px; font-size: 13px; line-height: 1; }
    .plan-savings-trigger:focus-visible { outline: 2px solid #f3bd69; outline-offset: 3px; }
    .plan-savings-tooltip { position: absolute; z-index: 20; inset-inline-end: 0; bottom: calc(100% + 8px); display: grid; gap: 4px; width: min(178px, calc(100vw - 48px)); padding: 11px 13px; border: 1px solid rgba(243,189,105,.48); border-radius: 9px; background: #242b38; box-shadow: 0 12px 28px rgba(0,0,0,.35); color: #f5f7fa; font-size: 11px; line-height: 1.45; text-align: start; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease, visibility .16s; pointer-events: none; }
    .plan-savings-tooltip span:first-child { color: #f3bd69; font-weight: 650; }
    .plan-savings[data-open="true"] .plan-savings-tooltip, .plan-savings-trigger:focus-visible + .plan-savings-tooltip { opacity: 1; visibility: visible; transform: none; }
    @media (hover: hover) { .plan-savings:hover .plan-savings-tooltip { opacity: 1; visibility: visible; transform: none; } }
    .plan-savings[data-dismissed="true"] .plan-savings-tooltip { opacity: 0; visibility: hidden; }
    @media (max-width: 1023px) { .pricing-grid, .sd-pricing-grid { grid-template-columns: minmax(0,1fr); } .pricing-grid > div, .sd-pricing-grid > div { min-width: 0; } .plan-lifetime-card .plan-card-head { align-items: flex-start; flex-wrap: wrap; } .plan-lifetime-card .plan-card-head h3 { white-space: normal; } .plan-lifetime-card .plan-savings { margin-inline-start: auto; } .plan-savings-tooltip { position: static; display: none; margin-top: 8px; opacity: 1; visibility: visible; transform: none; } .plan-savings[data-open="true"] .plan-savings-tooltip, .plan-savings-trigger:focus-visible + .plan-savings-tooltip { display: grid; } .plan-savings[data-dismissed="true"] .plan-savings-tooltip { display: none; } }
    .plan-price-row { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: baseline; gap: 7px 8px; min-height: 48px; margin-bottom: 4px; }
    .plan-price { font-size: 30px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
    .plan-subscription-card .plan-price { color: #f3bd69; }
    .plan-price span { color: #A9B2C2; font-size: 14px; font-weight: 400; }
    .plan-price s { margin-left: 6px; color: #8892A2; font-size: 15px; font-weight: 400; text-decoration-color: #8892A2; }
    .plan-comparison { min-height: 32px; margin: 0 0 16px; color: #A9B2C2; font-size: 12px; line-height: 1.55; }
    .plan-free-card .plan-comparison { color: #F5F7FA; font-weight: 600; }
    .plan-comparison strong { color: #F5F7FA; font-weight: 650; }
    .plan-lifetime-promise { color: #f5f7fa; font-weight: 600; }
    .sd-design .plan-features { display: grid; gap: 4px; margin: 0 0 20px; flex: 0 0 auto; }
    .sd-design .plan-features > li { min-height: 40px; }
    .plan-features li { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: start; gap: 10px; line-height: 1.6; }
    .plan-features iconify-icon { display: block; margin-top: 3px; font-size: 16px; line-height: 1; }
    .subscription-panel { display: flex; flex-direction: column; flex: 1; }


    @media (max-width: 900px) { .feature-showcase { gap: 190px; padding-top: 150px; padding-bottom: 200px; } .privacy-story { padding-bottom: 190px; } .story,.story-close { grid-template-columns: minmax(0,1fr); gap: 40px; } .story-close .visual-block,.privacy-story .privacy-points { order: 2; } .story-close .story-copy,.privacy-story .story-copy { order: 1; } }
    @media (max-width: 650px) { .feature-showcase { padding-top: 120px; padding-bottom: 170px; gap: 160px; } .privacy-story { padding-bottom: 170px; } .effect-action { width: 100%; } .rule-choices { grid-template-columns: 1fr; } .visual-caption-control { top: 8px; left: 8px; } .visual-caption-control span { display: none; } }
    @media (prefers-reduced-motion: reduce) { .site-header,.site-header::before,.effect-scene,.effect-soft,.option-btn,.effect-tab,.effect-cc-icon,.focus-lens,.focus-note { transition: none !important; animation: none !important; } }


/* Shared navigation and footer. */
.sd-header .container { max-width: 1200px; }
.sd-header .header-inner { height: 80px; }
.sd-header .wordmark img { width: auto; height: 32px; }
.sd-header .wordmark,
.site-footer .wordmark { position: relative; }
.sd-header .wordmark::after,
.site-footer .wordmark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f3bd69;
  -webkit-mask: url('/brand/logo-dark.svg') center / contain no-repeat;
  mask: url('/brand/logo-dark.svg') center / contain no-repeat;
  /* The icon already uses gold; reveal the mask only over the lettering. */
  clip-path: inset(0 0 0 28.57%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.sd-header .wordmark:hover::after,
.sd-header .wordmark:focus-visible::after,
.site-footer .wordmark:hover::after,
.site-footer .wordmark:focus-visible::after { opacity: 1; }
.sd-header .desktop-nav { gap: 32px; }
.sd-header .desktop-nav a { color: #a9b2c2; font-size: 15px; }
.sd-header .desktop-nav a:hover, .sd-header .desktop-nav a[aria-current="page"] { color: #f3bd69; }
.sd-header .header-actions { gap: 24px; }
.sd-header .language, .sd-header .language select { color: #a9b2c2; }
.sd-header-cta { border-radius: 8px; background: #f3bd69; color: #090b10; padding: 10px 20px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.sd-header-cta:hover { background: #ffd18e; color: #090b10; }
.sd-design #hero-cta-view:hover, .sd-design #plan-yearly-link:hover { color: #090b10; }
.sd-design .plan-features .sd-icon { margin-top: 3px; font-size: 16px; }
@media (min-width: 1024px) {
  .sd-design .plan-comparison { min-height: 32px; }
  .sd-design .sd-pricing-grid > div > a, .sd-design .subscription-panel > a { margin-top: auto; }
}
.sd-design .plan-feature-unavailable { color: #8f99a9; }
.sd-design .plan-feature-x { display: block; margin-top: 3px; color: #8f99a9; font-size: 16px; line-height: 1; font-weight: 700; }
.sd-static { min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; padding: 64px 24px; }
.sd-static > div { margin-inline: auto; }
.sd-static input:disabled, .sd-static button:disabled { cursor: not-allowed; }
.site-footer { background: #06080b; border-top: 1px solid rgba(255,255,255,.1); padding: 80px 0; }
.site-footer .container { max-width: 1200px; }
.site-footer .wordmark img { height: 32px; width: auto; }
.site-footer a:hover { color: #f3bd69; }
@media (prefers-reduced-motion: reduce) {
  .sd-header .wordmark::after,
  .site-footer .wordmark::after { transition: none; }
}
.site-footer .footer-top { margin-bottom: 80px; }
.site-footer .footer-bottom { padding-top: 40px; border-top-color: rgba(255,255,255,.05); }
.site-footer .footer-brand { max-width: 320px; }
.site-footer .footer-brand p { font-size: 14px; line-height: 1.7; margin-top: 24px; }
.site-footer .footer-links h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.site-footer .footer-links > div > a { font-size: 14px; }
.site-footer .launch-status { align-items: center; }
.site-footer .launch-status > span { width: 6px; height: 6px; }
@media(max-width:760px) {
  .sd-header .desktop-nav { display:none; }
  .sd-header .header-inner { height:72px; }
  .site-footer { padding:64px 0; }
  .site-footer .footer-top { margin-bottom:48px; }
}
@media(max-width:560px) {
  .sd-header .language { display:none; }
  .sd-header-cta { padding:9px 12px; font-size:12px; }
  .mobile-nav .mobile-language { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px; border-bottom:1px solid var(--line); color:#a9b2c2; }
  .mobile-nav .mobile-language select { max-width:65%; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:#151923; color:#f4f5f8; font:inherit; }
}

/* Generated by npm run assets:images. */
.effect-scene { --scene-image: url("/design/optimized/podcast-1672.902ca245afa90f5e.jpg"); --scene-image-small: url("/design/optimized/podcast-1672.902ca245afa90f5e.jpg"); }
.v-open-video { --scene-image: url("/design/optimized/explainer-1672.1ac5fbeee28aada5.webp"); --scene-image-small: url("/design/optimized/explainer-840.050328dfea6bb021.webp"); }
.v-lang-video { --scene-image: url("/design/optimized/ceramics-1672.501a8f3bab89014a.webp"); --scene-image-small: url("/design/optimized/ceramics-840.740ce5ff2b78c2d4.webp"); }
@media (max-width: 420px) and (max-resolution: 1dppx) {
  .effect-scene, .v-open-video, .v-lang-video { background-image: var(--scene-image-small, var(--scene-image)); }
}

.sd-start.sd-static { display: block; min-height: 0; padding: clamp(64px, 7vw, 110px) 24px; }
.sd-start-main { padding: clamp(64px, 7vw, 110px) 24px; }
.sd-start-layout { max-width: 1120px; margin: auto; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: clamp(36px, 5vw, 88px); align-items: start; }
.sd-start-eyebrow, .zh-page-intro .eyebrow { color: #f3bd69; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.sd-start-primary h1 { margin: 14px 0 20px; font-size: clamp(36px, 4vw, 58px); line-height: 1.14; }
.sd-start-lead { max-width: 680px; color: #a9b2c2; font-size: 18px; line-height: 1.8; }
.sd-start-steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; gap: 38px; }
.sd-start-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 18px; }
.sd-start-step-number { width: 32px; height: 32px; border: 1px solid #f3bd69; border-radius: 50%; display: grid; place-items: center; color: #f3bd69; font-weight: 700; }
.sd-start-steps h2 { margin: 0 0 8px; font-size: 22px; }
.sd-start-steps p, .sd-start-aside p { margin: 0; color: #a9b2c2; line-height: 1.75; }
.sd-start-action { display: inline-block; margin-top: 18px; padding: 12px 18px; border-radius: 9px; background: #f3bd69; color: #090b10; font-weight: 700; }
.sd-start-action:hover, .sd-start-action:focus-visible { background: #ffd18e; color: #090b10; }
.sd-start-aside { padding: 32px; background: #12151c; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; }
.sd-start-aside h2 { margin: 0 0 14px; font-size: 25px; }
.sd-start-aside-links { display: grid; gap: 14px; margin: 30px 0; }
.sd-start-aside-links a { color: #f3bd69; font-weight: 600; }
.sd-start-aside-note { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; }
.sd-start-aside-note strong { display: block; margin-bottom: 10px; }
.zh-help { width: min(1120px, calc(100% - 48px)); max-width: 1120px; }
.zh-page-intro { max-width: 780px; }
.zh-page-intro h1 { margin: 14px 0 18px; font-size: clamp(36px, 4vw, 54px); line-height: 1.2; }
.zh-page-intro h2 { margin: 0 0 12px; font-size: clamp(28px, 3vw, 38px); }
.zh-page-intro p { color: #a9b2c2; line-height: 1.8; }
.zh-quick-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.zh-quick-links a { display: inline-block; padding: 12px 16px; border: 1px solid rgba(243,189,105,.38); border-radius: 9px; color: #f3bd69; font-weight: 600; }
.zh-quick-links a:hover, .zh-help-nav a:hover { border-color: #f3bd69; background: rgba(243,189,105,.08); }
.zh-help-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 48px 0 20px; }
.zh-help-nav a { padding: 10px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; color: #d6dbe5; }
.zh-help-group { padding: 48px 0 20px; }
.zh-help-next { margin: 54px 0 0; padding: 30px; border: 1px solid rgba(243,189,105,.28); border-radius: 16px; background: rgba(243,189,105,.05); }
.zh-help-next h2 { margin: 0 0 8px; font-size: 24px; }
.zh-help-next p { color: #a9b2c2; line-height: 1.7; }
.zh-help-contact { margin-top: 48px; }
.zh-help-contact h2 { margin: 0 0 8px; font-size: 24px; }
.zh-help-contact p { color: #a9b2c2; line-height: 1.7; }
.zh-help-contact a { color: #f3bd69; }
.zh-pricing-faq { max-width: 900px; padding-block: 85px; }
.zh-pricing-faq .zh-page-intro { margin-bottom: 28px; }
.zh-privacy-date { color: #a9b2c2; font-size: 13px; margin: 0 0 18px; }
.zh-privacy-lead { font-size: 17px !important; color: #f5f7fa; line-height: 1.85; }
.legal-contents { margin: 0 0 48px; padding: 20px 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; }
.legal-contents strong { display: block; margin-bottom: 14px; }
.legal-contents ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; margin: 0; padding-inline-start: 1.5em; }
.legal-contents li { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .legal-contents ol { grid-template-columns: 1fr; } }
.zh-privacy section { border-top: 1px solid rgba(255,255,255,.12); padding-top: 30px; }
.zh-privacy section h2 { margin-top: 0; }
.zh-privacy section p, .zh-privacy li { line-height: 1.9; color: #a9b2c2; }
.zh-privacy li { margin: 0 0 12px; }
.zh-privacy ul { padding-left: 1.35em; margin: 18px 0 0; }
html[dir="rtl"] .zh-privacy ul { padding-left: 0; padding-right: 1.35em; }
html[dir="rtl"] .zh-help,
html[dir="rtl"] .zh-privacy,
html[dir="rtl"] .sd-design,
html[dir="rtl"] .sd-pricing-page { text-align: start; }
html[dir="rtl"] .sd-design table,
html[dir="rtl"] .sd-pricing-page table { direction: rtl; }
html[dir="rtl"] .sd-design a[href^="https://"],
html[dir="rtl"] .sd-pricing-page a[href^="https://"] { unicode-bidi: isolate; }
html[dir="rtl"] .plan-price,
html[dir="rtl"] .zh-privacy code { direction: ltr; unicode-bidi: isolate; }
.zh-privacy strong { color: #f5f7fa; }
.zh-privacy a { color: #f3bd69; text-decoration: underline; text-underline-offset: 3px; }
.zh-privacy a:hover { color: #f6c985; }
.zh-privacy code { color: #f5f7fa; font-size: .9em; }
@media (max-width: 760px) {
  .zh-help { width: calc(100% - 40px); }
  .sd-start-layout { grid-template-columns: 1fr; }
  .sd-start.sd-static { padding: 64px 20px; }
  .sd-start-aside { padding: 24px; }
  .zh-help-nav { margin-top: 36px; }
  .zh-pricing-faq { padding-block: 64px; }
}

/* Homepage atmosphere. Keep all decoration behind content and outside the demo. */
:root {
  --site-atmosphere:
    linear-gradient(180deg, transparent 35%, rgba(9, 11, 16, .45) 67%, #090b10 100%),
    radial-gradient(ellipse 35% 70% at 64% 32%, rgba(156, 101, 39, .16), transparent 100%),
    radial-gradient(ellipse 35% 70% at 36% 34%, rgba(91, 62, 145, .19), transparent 100%),
    #090b10;
}

.sd-home {
  background: #090b10;
}

.sd-home > .sd-fragment:first-child > section:first-child {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--site-atmosphere);
}

.sd-home > .sd-fragment:first-child > section:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 30% 38% at 50% 35%, rgba(243, 189, 105, .07), transparent 85%);
  opacity: .6;
}

.sd-home > .sd-fragment:first-child > section:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 45% 50% at 50% 0%, rgba(225,201,167,.04), transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 76% at 50% 22%, #000 20%, transparent 92%);
  mask-image: radial-gradient(ellipse 85% 76% at 50% 22%, #000 20%, transparent 92%);
  opacity: .68;
}

.sd-home .effect-wrap {
  position: relative;
  isolation: isolate;
}

.sd-home .effect-wrap::before {
  content: "";
  position: absolute;
  inset: -9% 0 4%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(243, 189, 105, .13), rgba(91, 62, 145, .14) 43%, transparent 75%);
  filter: blur(34px);
  opacity: .72;
}

.sd-home .effect-stage {
  box-shadow:
    0 34px 80px rgba(0, 0, 0, .4),
    0 0 0 1px rgba(243, 189, 105, .08),
    0 0 70px rgba(243, 189, 105, .055);
}

.sd-home #features {
  gap: 228px;
  padding-top: 150px;
  padding-bottom: 210px;
}

.sd-home #features .story {
  position: relative;
  isolation: isolate;
}

.sd-home #features .story::before {
  content: "";
  position: absolute;
  inset: -22% 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 42% 54% at 71% 51%, rgba(91, 62, 145, .17), transparent 82%);
}

.sd-home #features .story:nth-child(2)::before {
  background: radial-gradient(ellipse 44% 54% at 30% 49%, rgba(243, 189, 105, .10), transparent 82%);
}

.sd-home #features .story:nth-child(3)::before {
  background: radial-gradient(ellipse 45% 58% at 73% 48%, rgba(91, 62, 145, .16), transparent 82%);
}

.sd-home #features .visual-block {
  box-shadow: 0 24px 64px rgba(0, 0, 0, .20), 0 0 42px rgba(83, 117, 153, .045);
}

.sd-home #privacy {
  position: relative;
  isolation: isolate;
  padding-bottom: 190px;
}

.sd-home #privacy::before {
  content: "";
  position: absolute;
  inset: -18% 0 8%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 54% 64% at 62% 49%, rgba(137, 96, 51, .13), transparent 79%);
}

.sd-home #pricing {
  background:
    radial-gradient(ellipse 48% 34% at 50% 0%, rgba(243, 189, 105, .07), transparent 84%),
    linear-gradient(180deg, rgba(19, 24, 33, .48), rgba(14, 18, 25, .2) 66%, #090b10);
}

.sd-home #faq {
  background: radial-gradient(ellipse 54% 42% at 50% 4%, rgba(91, 62, 145, .10), transparent 80%);
}

@media (max-width: 900px) {
  .sd-home #features { gap: 160px; padding-top: 125px; padding-bottom: 175px; }
  .sd-home #privacy { padding-bottom: 165px; }
}

@media (max-width: 650px) {
  .sd-home #features { gap: 125px; padding-top: 105px; padding-bottom: 145px; }
  .sd-home #privacy { padding-bottom: 145px; }
  .sd-home > .sd-fragment:first-child > section:first-child {
    background: var(--site-atmosphere);
  }
  .sd-home .effect-wrap::before { inset: -4% 0 8%; filter: blur(22px); }
}

/* Reserve the one-pixel divider from the start so it never shifts the layout. */
.site-header.sd-header {
  border-bottom-color: transparent;
}

.site-header.sd-header.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, .075);
}

/* Carry the same violet / warm-gold light into support pages, without moving content. */
body:not(.media-kit-body) {
  background:var(--site-atmosphere);
  background-size:100% max(900px,100vh);
  background-repeat:no-repeat;
  background-color:#090b10;
}

/* Website controls only. Homepage feature / extension demos keep their own UI. */
:root {
  --ui-page-width: 1040px;
  --ui-reading-width: 800px;
  --ui-auth-width: 440px;
  --ui-gutter: 24px;
  --ui-page-top: 48px;
  --ui-page-bottom: 80px;
  --ui-control-height: 36px;
  --ui-control-radius: 8px;
  --ui-panel-radius: 16px;
  --ui-panel-padding: 28px;
  --ui-control-border: rgba(255,255,255,.18);
}

/* Icon actions reuse the default control height, colors and focus treatment. */
.site-ui .button.icon-only {
  inline-size: var(--ui-control-height);
  padding: 0;
  flex: 0 0 auto;
}

.privacy-controls { display: contents; }
.site-footer .analytics-settings {
  display: block; padding: 6px 0; margin: 0 0 4px;
  border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 14px; text-align: start; cursor: pointer;
  transition: color .18s;
}
.site-footer .analytics-settings:hover { color: var(--gold); }
.site-footer .analytics-settings:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.directory-backlinks { padding-block: 42px 54px; }
.directory-backlinks h2 { margin: 0 0 24px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.7; font-weight: 500; letter-spacing: .06em; }
.directory-backlink-slider { display: flex; align-items: center; gap: 12px; }
.directory-backlink-control { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .18s, background-color .18s, color .18s; }
.directory-backlink-slider:is(:hover, :has(:focus-visible)) .directory-backlink-control { opacity: .75; pointer-events: auto; }
.directory-backlink-control:hover { background: rgba(255,255,255,.04); }
.directory-backlink-control:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; opacity: 1; }
.directory-backlink-control:disabled { visibility: hidden; }
[dir="rtl"] .directory-backlink-control svg { transform: rotate(180deg); }
.directory-backlink-carousel { --directory-row-gap: 22px; --directory-column-gap: 32px; display: flex; flex: 1 1 0; height: calc(44px * 2 + var(--directory-row-gap) + 12px); min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x mandatory; touch-action: pan-y; user-select: none; }
.directory-backlink-carousel::-webkit-scrollbar { display: none; }
.directory-backlink-carousel:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.directory-backlink-page { display: flex; flex-wrap: wrap; flex: 0 0 100%; min-width: 0; height: 100%; align-content: flex-start; align-items: center; justify-content: center; gap: var(--directory-row-gap) var(--directory-column-gap); padding: 6px; scroll-snap-align: start; scroll-snap-stop: always; }
.directory-backlink-page a { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; min-width: 44px; height: 44px; min-height: 44px; padding-block: 4px; color: var(--muted); font-family: Satoshi, system-ui, sans-serif; font-size: 16px; line-height: 1.5; font-weight: 500; transition: color .18s; }
.directory-backlink-page a:hover { color: var(--gold); }
.directory-backlink-page .directory-backlink-text { max-width: 240px; overflow-wrap: anywhere; text-wrap: pretty; }
.directory-backlink-page .directory-backlink-badge { width: var(--directory-image-width); flex-basis: var(--directory-image-width); }
.directory-backlink-badge img { display: block; width: var(--directory-image-width); height: auto; max-width: 100%; object-fit: contain; flex: none; min-width: 0; background: var(--directory-image-background, transparent); }
@media (max-width: 760px) {
  .directory-backlinks { display: none; }
}

.analytics-consent {
  position: fixed; z-index: 100; right: var(--ui-gutter); bottom: 24px;
  width: min(440px, calc(100vw - 48px)); margin: 0; text-align: start;
  background: var(--surface, #12151c); border: 1px solid var(--ui-control-border);
  max-height: calc(100dvh - 48px); overflow-y: auto;
}
.analytics-consent-header { display: flex; align-items: center; min-height: 36px; padding-inline-end: 36px; margin-block-end: 12px; }
.analytics-consent .ui-modal-close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; }
.analytics-consent h2 { font-size: 1.1rem; margin: 0; }
.analytics-consent p { font-size: .9rem; line-height: 1.7; margin: 0 0 16px; }
.analytics-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; }
.analytics-actions.is-customizing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-ui .analytics-actions .button { padding-inline: 8px; }
.privacy-categories { margin-block-end: 16px; }
.privacy-category { padding-block: 16px; border-top: 1px solid var(--ui-control-border); }
.privacy-category label { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 650; }
.privacy-category input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--accent, #f5bd65); }
.privacy-category input:focus-visible { outline: 2px solid var(--accent, #f5bd65); outline-offset: 4px; }
.privacy-category small { display: block; margin-block: 4px; color: var(--muted); }
.privacy-category p { margin: 8px 0 0; }
@media (max-width: 760px) {
  .analytics-consent { right: 20px; bottom: 20px; width: calc(100vw - 40px); }
}

body .container.site-ui {
  width: calc(100% - var(--ui-gutter) * 2);
  max-width: var(--ui-page-width);
  padding-block: var(--ui-page-top) var(--ui-page-bottom);
}
body .container.site-ui.narrow { max-width: var(--ui-reading-width); }
.site-ui.sd-start.sd-static {
  padding: var(--ui-page-top) var(--ui-gutter) var(--ui-page-bottom);
}
.site-ui .sd-start-layout { max-width: var(--ui-page-width); }
.site-ui :is(.page-intro, .zh-page-intro, .license-heading) {
  max-width: none;
  margin: 0 0 32px;
  text-align: start;
}
.site-ui :is(.page-intro, .zh-page-intro, .license-heading, .sd-start-primary) h1 {
  margin: 0 0 12px;
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: -.035em;
}
.site-ui :is(.page-intro, .zh-page-intro, .license-heading) p,
.site-ui .sd-start-lead {
  max-width: 680px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
}
.site-ui :is(.panel, .sd-start-aside, .zh-help-next, .legal-contents) {
  padding: var(--ui-panel-padding);
  border-radius: var(--ui-panel-radius);
}

/* Compact default with an explicit large submit variant; no hover movement. */
.site-ui :is(.button, .sd-start-action, .zh-quick-links a),
.site-header .sd-header-cta, .sd-home .ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ui-control-height);
  max-width: 100%;
  padding: 8px 20px;
  border: 1px solid transparent;
  border-radius: var(--ui-control-radius);
  font-size: .85rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color .18s, color .18s, border-color .18s, opacity .18s;
}
.site-ui :is(.button, .sd-start-action, .zh-quick-links a):hover,
.site-header .sd-header-cta:hover, .sd-home .ui-button:hover { transform: none; }
.site-ui :is(.button.secondary, .zh-quick-links a), .sd-home .ui-button.secondary {
  background: rgba(255,255,255,.04);
  border-color: var(--ui-control-border);
  color: var(--text);
}
.site-ui :is(.button.secondary, .zh-quick-links a):hover:not(:disabled), .sd-home .ui-button.secondary:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--ui-control-border);
  color: var(--text);
}
.site-ui :is(.button.primary, .sd-start-action), .site-header .sd-header-cta, .sd-home .ui-button.primary {
  background: var(--gold);
  color: var(--bg);
}
.site-ui :is(.button.primary, .sd-start-action):hover:not(:disabled),
.site-header .sd-header-cta:hover, .sd-home .ui-button.primary:hover { background: #ffd18e; color: var(--bg); }
.site-ui :is(.button, .text-button):disabled {
  opacity: .5;
  cursor: not-allowed;
}
.site-ui :is(button[aria-busy="true"], [aria-busy="true"] button:disabled) { cursor: progress; }
.site-ui .text-button {
  min-height: var(--ui-control-height);
  padding: 8px 0;
  font-size: .85rem;
  line-height: 1.35;
}
.site-ui :is(p a, li a, .sd-start-aside-links a, .order-panel > a):not(.sd-start-action, .button),
.site-ui > a, .site-ui .text-button {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.site-ui :is(p a, li a, .sd-start-aside-links a, .order-panel > a):not(.sd-start-action, .button):hover,
.site-ui > a:hover, .site-ui .text-button:hover:not(:disabled) { color: #ffd18e; }
.site-ui .sd-start-action { text-decoration: none; color: var(--bg); }
.site-ui :is(.form-panel, .unified-sign-in) input {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--ui-control-border);
  background: #090b10;
  color: var(--text);
  border-radius: var(--ui-control-radius);
  font-size: 1rem;
}
.site-ui .form-panel input[readonly] { cursor: progress; }
.site-ui :is(.form-panel, .unified-sign-in) input:focus-visible { outline-offset: 3px; }
.site-ui :is(button, a, summary),
.site-header :is(button, a, select), .site-footer a, .directory-backlinks a {
  -webkit-tap-highlight-color: transparent;
}
.site-ui :is(button, a, summary):focus-visible, .sd-home .ui-button:focus-visible,
.site-header :is(button, a, select):focus-visible, .site-footer a:focus-visible, .directory-backlinks a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.site-ui .zh-help-nav { margin-top: 32px; }
.site-ui .zh-help-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-control-height);
  padding: 8px 14px;
  font-size: .85rem;
  line-height: 1.35;
}
.site-ui .button.large, .sd-home .ui-button.large {
  min-height: 44px;
  padding: 11px 24px;
  font-size: .95rem;
}
.site-ui .order-panel > .button { margin-inline-end: 16px; }

.ui-action-label { display: block; position: relative; max-width: 100%; text-align: center; }
.ui-spinner {
  position: absolute;
  inset-inline-start: -16px;
  top: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: ui-spin .8s linear infinite;
}
.ui-spinner:not(.is-busy) { visibility: hidden; animation: none; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

.site-header .header-actions { margin-left: 0; margin-inline-start: auto; }
.site-header .desktop-nav a { display: inline-flex; align-items: center; min-height: 36px; }
.site-header .menu-toggle { border-radius: var(--ui-control-radius); flex-shrink: 0; }
.site-header .mobile-nav a[aria-current="page"] { color: var(--gold); }
.site-header .mobile-nav { max-height: calc(100dvh - 80px); overflow-y: auto; }
.site-footer .footer-links > div > a { padding-block: 6px; margin-bottom: 4px; }

@media (max-width: 760px) {
  :root { --ui-gutter: 20px; --ui-page-top: 32px; --ui-page-bottom: 48px; --ui-panel-padding: 20px; }
  .site-ui :is(.page-intro, .zh-page-intro, .license-heading) { margin-bottom: 24px; }
  .site-ui .sd-start-layout { gap: 32px; }
  .site-ui .order-line { flex-wrap: wrap; gap: 12px; }
}
@media (pointer: coarse) {
  :root { --ui-control-height: 44px; }
  .site-header .menu-toggle { width: 44px; height: 44px; }
  .site-header .language select, .site-footer .footer-links > div > a, .site-footer .analytics-settings { min-height: 44px; }
}

/* All gold actions share one resting/hover treatment, including linked actions. */
:is(.site-ui .button.primary, .site-ui .sd-start-action, .site-header .sd-header-cta, .sd-home .ui-button.primary),
:is(.site-ui .button.primary, .site-ui .sd-start-action, .site-header .sd-header-cta, .sd-home .ui-button.primary):hover {
  color: var(--bg);
  border-color: transparent;
  box-shadow: none;
  transform: none;
  text-decoration: none;
  transition: background-color .18s;
}

/* Hover is a color change, never a second shape or a layout animation. */
.site-ui .zh-help-nav a:hover { border-color: rgba(255,255,255,.14); color: #d6dbe5; }
.site-ui :is(.button, .sd-start-action, .zh-quick-links a, .zh-help-nav a),
.site-header .sd-header-cta, .sd-home .ui-button { transition: background-color .18s; }
.site-ui .text-button, .site-header .desktop-nav a, .site-header .mobile-nav a,
.site-footer .footer-links > div > a { transition: color .18s; }
.site-header .menu-toggle:hover { background: rgba(255,255,255,.08); }
.site-header .language select:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .ui-spinner { animation: none; }
  .sd-home .ui-button, .site-ui *, .site-header *, .site-footer *, .directory-backlinks * { scroll-behavior: auto; transition-duration: 0s; }
}

/* Shared FAQ: section, list, item and disclosure geometry for every page. */
.ui-faq-section .ui-faq-heading { margin: 0 0 22px; text-align: start; }
.ui-faq-section .ui-faq-heading h2 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.3; }
.ui-faq-section .ui-faq-heading p { margin: 12px 0 0; color: var(--muted); line-height: 1.8; }
.ui-faq-section .ui-faq-heading--prominent { margin-bottom: 64px; text-align: center; }
.ui-faq-section .ui-faq-heading--prominent h2 { font-size: 30px; line-height: 1.2; }
.ui-faq-list { display: grid; gap: 12px; min-width: 0; }
.ui-faq-list .ui-faq-item {
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--ui-panel-radius);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  overflow: hidden;
}
.ui-faq-item .ui-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 19px 22px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
  text-align: start;
  list-style: none;
  cursor: pointer;
  transition: background-color .18s;
}
.ui-faq-question::-webkit-details-marker { display: none; }
.ui-faq-question::marker { content: ""; }
.ui-faq-question .ui-faq-label { min-width: 0; overflow-wrap: anywhere; }
.ui-faq-item .ui-faq-question:hover { background: rgba(255,255,255,.04); }
.ui-faq-item .ui-faq-question:focus-visible { outline: none; }
.ui-faq-list .ui-faq-item:has(> .ui-faq-question:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.ui-faq-question .ui-faq-chevron {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--gold);
  transform-origin: center;
  transition: transform 320ms cubic-bezier(.22,1,.36,1);
}
.ui-faq-item[open] .ui-faq-chevron,
.ui-faq-item[data-faq-open="true"] .ui-faq-chevron { transform: rotate(180deg); }
.ui-faq-item[data-faq-open="false"] .ui-faq-chevron { transform: rotate(0); }
.ui-faq-answer { overflow: hidden; }
.ui-faq-answer .ui-faq-content {
  padding: 18px 22px 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  text-align: start;
  overflow-wrap: anywhere;
}
.ui-faq-section .ui-faq-footer { margin: 28px 0 0; text-align: center; }
.ui-faq-footer a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.ui-faq-footer a:hover { color: #ffdda9; }
.home-faq { width: calc(100% - var(--ui-gutter) * 2); max-width: var(--ui-reading-width); margin-inline: auto; padding-block: 160px; }
@media (max-width: 760px) { .home-faq { padding-block: 80px; } }
@media (prefers-reduced-motion: reduce) { .ui-faq-question, .ui-faq-chevron { transition: none !important; } }

/* Session restoration is page status, separate from the email submit action. */
.site-ui .account-loading { min-height: 0; text-align: center; }
.site-ui .account-load-status { display: flex; justify-content: center; margin: 0; color: var(--muted); }
.site-ui .account-login .account-feedback { margin-block-start: 18px; }
.site-ui .account-loading .account-feedback { margin-block: 0 20px; }

/* Channel offers share the account controls and preserve logical RTL spacing. */
.campaign-offer { margin-block-end: 1.5rem; overflow-wrap: anywhere; }
.account-content-stack { display: flex; flex-direction: column; gap: 16px; }
.site-ui .account-content-stack > * { margin-block: 0; }
.account-content-stack > .account-benefits { padding-block-start: 16px; }
.account-content-stack > .fine-print { margin-block-start: 0; }

/* Claims and checkout returns put the outcome before concise follow-up actions. */
.site-ui .outcome-panel {
  max-width: var(--ui-reading-width); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 24px; text-align: center; padding-block: 48px;
}
.outcome-summary { width: 100%; max-width: 560px; }
.site-ui .outcome-summary h1 { margin: 0 0 16px; font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1.25; letter-spacing: -.035em; }
.outcome-description { display: grid; gap: 12px; }
.site-ui .outcome-panel p { margin: 0; line-height: 1.75; }
.site-ui .outcome-panel .outcome-lead { color: var(--text); font-weight: 600; }
.outcome-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; max-width: 100%; }
.site-ui .outcome-actions--result {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: stretch; justify-content: center; width: max-content; max-width: 100%; gap: 12px;
}
.site-ui .outcome-actions--result > .button {
  min-height: 44px; padding: 10px 24px; font-size: .95rem;
  min-width: 0; width: 100%; height: 100%;
}
.site-ui .outcome-help { font-size: .85rem; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.site-ui .outcome-help:hover { color: #ffd18e; }
.outcome-mark { display: block; width: 96px; height: 96px; flex: 0 0 96px; color: var(--gold); }
.outcome-mark.is-error { color: #e7a394; }
.outcome-mark.is-pending { color: var(--muted); }
.outcome-mark svg { display: block; width: 100%; height: 100%; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.outcome-disc { fill: currentColor; fill-opacity: .055; stroke-opacity: .38; stroke-width: 1; }
.outcome-glyph { stroke-width: 1.75; }
.outcome-check { stroke-dasharray: 1; stroke-dashoffset: 0; animation: outcome-check .38s cubic-bezier(.2,.7,.3,1) .07s both; }
.outcome-ring-success { animation: outcome-settle .52s ease-out both; }
.outcome-error-dot { fill: currentColor; stroke: none; }
.outcome-pending-track { stroke-opacity: .16; stroke-width: 1.75; }
.outcome-pending { stroke-width: 1.75; transform-origin: 32px 32px; animation: ui-spin 1.2s linear infinite; }
@keyframes outcome-check { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes outcome-settle { 0% { stroke-opacity: .15; fill-opacity: .025; } 55% { stroke-opacity: .55; fill-opacity: .085; } 100% { stroke-opacity: .38; fill-opacity: .055; } }
@media (max-width: 760px) {
  .site-ui .outcome-panel { padding-block: 32px; }
  .outcome-mark { width: 80px; height: 80px; flex-basis: 80px; }
  .site-ui .outcome-actions--result {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr; width: 100%;
  }
  .site-ui .outcome-actions--result > .button { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .outcome-check, .outcome-ring-success, .outcome-pending { animation: none; } }
/* Shared site modal; consumers supply content rather than a second dialog shell. */
.ui-modal {
  box-sizing: border-box; width: min(var(--ui-auth-width), calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow: auto; padding: 0;
  background: var(--surface, #12151c); color: var(--text, #f4f4f6);
  border: 1px solid var(--ui-control-border); border-radius: var(--ui-panel-radius);
  text-align: start;
}
.ui-modal::backdrop { background: rgba(0,0,0,.7); }
.ui-modal-header { display: flex; justify-content: flex-end; padding: 16px 16px 0; }
.ui-modal-close-space { width: 36px; height: 36px; flex: 0 0 36px; }
.site-ui .button.secondary.ui-modal-close { box-sizing: border-box; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; flex: 0 0 36px; }
.ui-modal-close svg { display: block; flex: none; }
.ui-modal .cl-formFieldInput:focus {
  box-shadow: none;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.ui-modal-content { padding: 16px var(--ui-panel-padding) var(--ui-panel-padding); }
.ui-modal-status { display: flex; align-items: center; justify-content: center; min-height: 96px; margin: 0; color: var(--muted); }
.ui-action-label--inline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ui-action-label--inline .ui-spinner { position: static; flex: 0 0 12px; }
.ui-modal-feedback { display: grid; gap: 20px; }
.ui-modal-feedback > p { margin: 0; line-height: 1.7; }
.ui-modal-feedback > .button { width: 100%; }
.account-social-login { margin-block-end: 20px; }
button[data-checkout-busy] { position: relative; }
button[data-checkout-busy]::after {
  content: ''; position: absolute; inset-inline-end: 8px; width: 12px; height: 12px;
  border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%;
  animation: ui-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { button[data-checkout-busy]::after { animation: none; } }

/* One shared sign-in form for account, campaign, activation and purchase. */
.account-login { box-sizing: border-box; width: 100%; max-width: var(--ui-auth-width); min-height: 360px; margin-inline: auto; padding: var(--ui-panel-padding); border-radius: var(--ui-panel-radius); }
.account-login:has(.unified-sign-in) { min-height: 0; }
.account-auth-content { width: 100%; min-width: 0; }
.account-auth-content > :is(h2, p) { text-align: center; }
.unified-sign-in { display: grid; gap: 20px; min-width: 0; }
.unified-sign-in form { display: grid; gap: 8px; min-width: 0; }
.auth-social-buttons { display: grid; gap: 10px; min-width: 0; }
.site-ui .unified-sign-in form > label { margin: 0; font-size: .86rem; }
.unified-sign-in form > input { width: 100%; min-width: 0; box-sizing: border-box; }
.site-ui .unified-sign-in form > .button { margin-top: 12px; }
.auth-divider { display: flex; align-items: center; gap: 16px; color: var(--ui-text-muted, #a5abb8); }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--ui-control-border, #333); }
.site-ui .auth-social-buttons > .button { padding-inline: 24px; font-weight: 500; }
.auth-social-buttons .ui-action-label { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.auth-social-buttons .ui-action-label > span:last-child { min-width: 0; }
.auth-provider-icon { display: block; flex: 0 0 16px; width: 16px; height: 16px; }
.auth-social-buttons .ui-spinner { inset-inline-start: 2px; }
.auth-social-buttons [aria-busy="true"] .auth-provider-icon { visibility: hidden; }

.site-ui .ui-modal-content > h2 { font-size: 1.25rem; line-height: 1.4; margin: 0 0 24px; text-align: center; }

/* Shared two-step email verification. */
.auth-heading { text-align: center; min-width: 0; }
.site-ui .auth-heading h2 { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.site-ui .auth-heading p { margin: 12px 0 0; color: var(--ui-text-muted); font-size: .9rem; }
.auth-recipient { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 20px; min-width: 0; font-size: .85rem; white-space: nowrap; }
.auth-recipient-caption { flex: 0 0 auto; color: var(--ui-text-muted); }
.auth-recipient bdi { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.site-ui .unified-sign-in .auth-code-input { text-align: start; letter-spacing: normal; font-variant-numeric: tabular-nums; }
.site-ui .unified-sign-in .auth-code-input[aria-invalid="true"] { border-color: #ffb0a3; }
.site-ui .unified-sign-in .auth-error { margin: 4px 0 0; color: #ffb0a3; font-size: .85rem; overflow-wrap: anywhere; }
.auth-resend { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; column-gap: 10px; color: var(--ui-text-muted); font-size: .85rem; }
.auth-resend .text-button { padding-inline: 16px; }
/* Text actions retain a usable target without competing with the submit button. */
.site-ui .auth-edit-email { flex: 0 0 auto; padding: 4px 0; min-height: 28px; }
.auth-resend { min-height: 36px; margin-top: 4px; }
.auth-resend-countdown { color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
.site-ui .unified-sign-in .auth-resent { margin: 0; color: var(--ui-text-muted); font-size: .85rem; text-align: center; }

.auth-step-title { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; }
.site-ui .auth-back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ui-text-muted); cursor: pointer; }
.site-ui .auth-back:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
.site-ui .auth-back:disabled { opacity: .5; cursor: not-allowed; }
.auth-back svg { flex: 0 0 18px; }
[dir="rtl"] .auth-back svg { transform: scaleX(-1); }

/* Connection copy follows the account content rhythm without paragraph margins. */
.account-connect-intro { display:flex; flex-direction:column; gap:8px; }
.site-ui .account-connect-intro > * { margin-block:0; }
.account-connect > .button { align-self:flex-start; }

@media (prefers-reduced-motion: reduce) { .directory-backlink-control { transition: none; } }

.updates-page { min-height: 52vh; }
.updates-page .page-intro { text-align: start; margin: 0 0 44px; max-width: 720px; }
.updates-page .page-intro h1 { font-size: clamp(32px,5vw,48px); margin: 0 0 16px; }
.updates-page .page-intro p,.updates-empty { color: var(--muted); line-height: 1.8; }
.updates-list { max-width: var(--ui-reading-width); }
.update-row { padding-block: 28px; border-top: 1px solid var(--line); }
.update-row time,.updates-meta { font-size: 13px; color: var(--muted); }
.update-row h2 { font-size: clamp(21px,3vw,26px); line-height: 1.45; margin: 10px 0; }
.update-row h2 a { text-decoration: none; transition: color .18s; }
.update-row h2 a:hover { color: var(--gold); }
.update-row p { margin: 0; color: var(--muted); line-height: 1.8; }
.updates-back { color: var(--muted); font-size: 14px; display: inline-block; margin-bottom: 30px; }
.updates-back:hover { color: var(--gold); }
.updates-intro h1 { font-size: clamp(30px,5vw,44px); line-height: 1.3; margin: 0 0 20px; overflow-wrap: anywhere; }
.updates-summary { color: var(--muted); font-size: 18px; line-height: 1.8; }
.updates-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.updates-body { font-size: 16px; line-height: 1.8; padding-top: 20px; overflow-wrap: anywhere; }
.updates-body h2,.updates-body h3 { margin: 32px 0 16px; line-height: 1.45; }
.updates-body p { margin-block: 20px; }
.updates-body ul,.updates-body ol { padding-inline-start: 24px; }
.updates-body li { margin-block: 8px; }
.updates-body a { color: var(--gold); text-decoration: underline; }
.updates-body a:hover { color: var(--text); }
.updates-body figure { margin: 28px 0; }
.updates-body img { display: block; max-width: 100%; height: auto; border-radius: var(--ui-control-radius); }
.updates-body figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; }
.updates-body pre,.updates-table { max-width: 100%; overflow-x: auto; }
.updates-body pre { padding: 20px; background: var(--surface); border-radius: var(--ui-control-radius); }
.updates-body blockquote { margin-inline: 0; padding-inline-start: 20px; border-inline-start: 2px solid var(--gold); color: var(--muted); }
.updates-body table { border-collapse: collapse; width: 100%; min-width: 320px; }
.updates-body td,.updates-body th { text-align: start; padding: 12px; border-bottom: 1px solid var(--line); }
.updates-related,.updates-install { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.updates-related h2 { font-size: 20px; }
.updates-related a { display: block; padding-block: 8px; }
.updates-related a:hover { color: var(--gold); }
.updates-install p { color: var(--muted); line-height: 1.8; }
.updates-article :is(a,button,select):focus-visible,.updates-page a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }

.article-share { margin-top:44px; padding-top:28px; border-top:1px solid var(--line); }
.article-share h2 { margin:0 0 16px; font-size:16px; line-height:1.5; font-weight:650; }
.article-share-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.article-share-actions svg { display:block; flex:0 0 auto; }
.article-share-status { margin:12px 0 0; min-height:1.5em; font-size:13px; line-height:1.5; color:var(--muted); }
.article-share-link { width:100%; margin-top:8px; min-height:44px; padding:8px 12px; border:1px solid var(--ui-control-border); border-radius:var(--ui-control-radius); background:transparent; color:var(--text); font:inherit; direction:ltr; }
.article-share-link:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }