/* Project 01 case study */
.c1 { --pc: #076001; max-width: var(--contentw); margin-inline: auto; position: relative; padding-bottom: var(--s-8); }
.c1 h1, .c1 h2, .c1 h3, .c1 h4 { margin: 0; }
.c1 p { color: var(--text-2); }
.c1-menu { position: fixed; left: max(14px, calc((100vw - var(--contentw)) / 2 - 168px)); top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 6px; font: 500 13px var(--f-b); z-index: 5; }
.c1-menu b { font: 600 11px var(--f-b); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
.c1-menu a { color: var(--text-2); text-decoration: none; padding: 3px 0 3px 12px; border-left: 2px solid var(--line); transition: color .2s, border-color .2s; }
.c1-menu a.on, .c1-menu a:hover { color: var(--text); border-color: var(--accent-d); }
@media (min-width: 1480px) { .c1-menu { display: flex; } }

/* hero */
.c1-hero { padding-top: calc(var(--nav-h) + var(--s-6)); }
.c1-h1 { font-size: clamp(44px, 8vw, 104px); line-height: 1; letter-spacing: -.04em; font-weight: 700; }
.c1-h1 .sel { position: relative; display: inline-block; padding: 0 .08em; outline: 2px solid #FFD60A; outline-offset: 2px; }
.c1-h1 .sel i { position: absolute; width: 9px; height: 9px; background: var(--bg); border: 2px solid #FFD60A; }
.c1-h1 .sel i:nth-child(1) { left: -5px; top: -5px; } .c1-h1 .sel i:nth-child(2) { right: -5px; top: -5px; } .c1-h1 .sel i:nth-child(3) { left: -5px; bottom: -5px; } .c1-h1 .sel i:nth-child(4) { right: -5px; bottom: -5px; }
.c1-h1 .cur { display: inline-flex; align-items: flex-start; gap: 2px; vertical-align: top; margin: .9em 0 0 -.15em; transform: translateY(-1.1em); }
.c1-h1 .cur em { font: 600 12px/1 var(--f-b); font-style: normal; background: #FFD60A; color: #202020; padding: 4px 8px; border-radius: 4px; margin-top: 16px; letter-spacing: 0; }
.c1-intro { font-size: clamp(18px, 2vw, 24px); max-width: 34ch; margin: var(--s-5) 0 var(--s-7); color: var(--text); }
.c1-sheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.cd { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s-4); box-shadow: var(--sh-1); font: 400 13px var(--f-b); display: grid; gap: 8px; align-content: start; }
.cd:nth-child(odd) { transform: rotate(-.8deg); } .cd:nth-child(even) { transform: translateY(10px) rotate(.7deg); }
.cd h4 { font: 600 11px var(--f-b); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.cd p { margin: 0; font-size: 13px; }
.swr { display: flex; gap: 4px; } .swr i { flex: 1; height: 22px; border-radius: 5px; } .swr.big i { height: 40px; } .swr.lab { flex-wrap: wrap; } .swr.lab span { font: 600 12px var(--f-b); padding: 4px 10px; border-radius: 99px; background: var(--k); color: #fff; }
.gs { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #ededed, #202020); }
.bt { display: grid; gap: 6px; } .bt span { font: 600 12px var(--f-b); padding: 8px 10px; border-radius: 8px; text-align: center; }
.b1 { background: #076001; color: #fff; } .b2 { border: 1.5px solid #076001; color: #076001; } .b3 { background: #d6d3cd; color: #8d8a84; } .b4 { color: #007AFF; text-decoration: underline; }
.ck, .tg { display: flex; align-items: center; gap: 8px; color: var(--text); } .ck i { width: 16px; height: 16px; border: 1.5px solid var(--n-500); border-radius: 4px; display: inline-grid; place-items: center; } .ck.on i { background: #076001; border-color: #076001; } .ck.on i::after { content: '✓'; color: #fff; font-size: 11px; }
.tg { justify-content: space-between; } .tg i { width: 32px; height: 18px; border-radius: 9px; background: #076001; position: relative; } .tg i::after { content: ''; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.ty { display: flex; align-items: center; gap: 12px; color: var(--text); } .ty b { font: 500 40px/1 Roboto, var(--f-b); } .ty span { font: 12px/1.4 Roboto, var(--f-b); color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips em, .mock em { font: 600 12px var(--f-b); font-style: normal; padding: 5px 11px; border-radius: 99px; }
em.ok { background: #E4F3E2; color: #27991F; } em.wn { background: #FFF8ED; color: #B36200; } em.er { background: #F9E3E3; color: #991F1F; }
.chips.plain em { background: var(--bg); border: 1px solid var(--line); color: var(--text-2); }
.chips.plain em.g { background: #076001; color: #fff; border-color: #076001; } .chips.plain em.to { border: 0; background: none; }
.c1-strip { display: flex; margin: var(--s-7) 0 var(--s-5); height: 10px; border-radius: 6px; overflow: hidden; } .c1-strip i { flex: 1; }
.c1-det { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin: 0; padding: var(--s-5) 0; border-block: 1px solid var(--line); }
.c1-det dt, .c1-tldr dt, .c1-dark b, .c1-biz b, .c1-basics .bl b, .sd small, .c1-end small { font: 600 12px var(--f-b); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.c1-det dd { margin: 4px 0 0; color: var(--text); }
@media (max-width: 900px) { .c1-sheet { grid-template-columns: 1fr 1fr; } .c1-det { grid-template-columns: 1fr 1fr; } .c1-h1 .cur { display: none; } }
@media (max-width: 520px) { .c1-sheet { grid-template-columns: 1fr; } .cd:nth-child(n) { transform: none; } }

/* tldr */
.c1-tldr { margin: var(--s-7) 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s-5) var(--s-6); }
.c1-tldr summary { font: 700 22px var(--f-b); cursor: pointer; list-style: none; display: flex; justify-content: space-between; } .c1-tldr summary::-webkit-details-marker { display: none; }
.c1-tldr summary { align-items: center; }
.c1-tldr summary::after { content: ''; width: 10px; height: 10px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .2s ease; flex: none; }
.c1-tldr[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.c1-tldr dl { margin: var(--s-5) 0 0; display: grid; } .c1-tldr dl div { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-4); padding: 14px 0; border-top: 1px solid var(--line-soft); }
.c1-tldr dd { margin: 0; color: var(--text); } @media (max-width: 640px) { .c1-tldr dl div { grid-template-columns: 1fr; gap: 4px; } .c1-tldr { padding: var(--s-5); } }

/* sections */
.c1-sec { padding-top: var(--section-y); position: relative; }
.c1-n { font: 700 14px var(--f-b); color: var(--accent); letter-spacing: .1em; display: block; margin-bottom: var(--s-3); }
.c1-sec h2 { font-size: clamp(34px, 5.4vw, 68px); line-height: 1.05; letter-spacing: -.035em; }
.c1-lede { font-size: clamp(17px, 1.8vw, 21px); max-width: 52ch; margin: var(--s-5) 0 var(--s-7); }
.c1-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } .c1-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-7); }
@media (max-width: 860px) { .c1-3, .c1-2 { grid-template-columns: 1fr; } }
.pc, .sd { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s-5); display: grid; gap: 10px; align-content: start; box-shadow: var(--sh-1); }
.pc h3, .sd h3 { font-size: 22px; line-height: 1.15; letter-spacing: -.02em; } .pc p, .sd p { margin: 0; } .pc em { font-style: normal; color: var(--text); font-weight: 600; } .pc .no { font: 700 13px var(--f-b); color: var(--accent); }
.pvis { min-height: 96px; border-radius: var(--r-m); background: var(--bg); border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 12px; margin-bottom: 6px; }
.sv { font: 600 13px var(--f-b); padding: 8px 16px; background: var(--pc, #076001); color: #fff; border-radius: 8px; }
.pvis .sv.a { border-radius: 99px; background: #1470EF; } .pvis .sv.b { border-radius: 0; background: #444; } .pvis .sv.c { background: none; color: #C95736; border: 1.5px solid #C95736; border-radius: 4px; }
.pvis.fonts span { font-size: 34px; color: var(--text); } .pvis.flow { font: 600 13px var(--f-b); color: var(--text); } .pvis.flow i { font-style: normal; color: var(--text-2); } .pvis.flow .rd { color: #991F1F; }
.c1-dark { margin-top: var(--s-7); padding: var(--s-7); border-radius: var(--r-l); background: #171615; color: #FFF9F0; display: grid; gap: var(--s-3); }
html[data-theme="night"] .c1-dark { background: #FFF9F0; color: #171615; } html[data-theme="night"] .c1-dark p { color: #453A33; } html[data-theme="night"] .c1-dark b { color: #655A52; }
.c1-dark b { color: #B6A394; } .c1-dark p { color: #DECDBB; margin: 0; max-width: 56ch; } .c1-dark p.q { font: 700 clamp(26px, 3.6vw, 44px)/1.1 var(--f-b); letter-spacing: -.03em; color: inherit; max-width: 22ch; }
html[data-theme="night"] .c1-dark p.q { color: #171615; } .c1-dark.light { background: var(--surface); color: var(--text); border: 1px solid var(--line); } .c1-dark.light b { color: var(--text-2); } .c1-dark.light p { color: var(--text-2); } .c1-dark.light p.q { color: var(--text); }
html[data-theme="night"] .c1-dark.light { background: var(--surface); color: var(--text); } html[data-theme="night"] .c1-dark.light p { color: var(--text-2); } html[data-theme="night"] .c1-dark.light p.q { color: var(--text); } html[data-theme="night"] .c1-dark.light b { color: var(--text-2); }
@media (max-width: 640px) { .c1-dark { padding: var(--s-5); } }

/* theme switcher */
.c1-play { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s-5); box-shadow: var(--sh-1); }
.pl-top { display: grid; gap: 12px; margin-bottom: var(--s-5); } .pl-top b { font: 600 15px var(--f-b); color: var(--text); }
.pks { display: flex; flex-wrap: wrap; gap: 8px; } .pk { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 99px; font: 500 14px var(--f-b); cursor: pointer; transition: all .2s; min-height: 40px; }
.pk i { width: 14px; height: 14px; border-radius: 50%; } .pk[aria-pressed="true"] { border-color: var(--pc); box-shadow: 0 0 0 2px var(--pc); font-weight: 600; } .pk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mock { background: #fff; color: #202020; border-radius: var(--r-m); overflow: hidden; border: 1px solid #dcd8d2; font: 400 13px Roboto, var(--f-b); }
.mbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #ededed; } .mbar i { width: 9px; height: 9px; border-radius: 50%; background: #c8c8c8; } .url { margin-left: 10px; background: #fff; border-radius: 99px; padding: 3px 12px; font-size: 12px; color: #4d4d4d; } .url u, .mh u { text-decoration: none; }
.mapp { display: grid; grid-template-columns: 150px 1fr; min-height: 260px; } .mapp aside { background: #f6f6f4; padding: 14px; display: grid; gap: 4px; align-content: start; border-right: 1px solid #e6e3de; } .mapp aside span { padding: 8px 10px; border-radius: 8px; color: #4d4d4d; } .mapp aside .on { background: var(--pc); color: #fff; transition: background .35s; }
.mapp main { padding: 18px; display: grid; gap: 16px; align-content: start; } .mh { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .mh h4 { font: 700 18px Roboto, var(--f-b); }
.mb { background: var(--pc); color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 600; transition: background .35s; } .mb2 { border: 1.5px solid var(--pc); color: var(--pc); padding: 7px 14px; border-radius: 8px; font-weight: 600; transition: all .35s; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stats div { border: 1px solid #e6e3de; border-radius: 10px; padding: 12px; } .stats small { color: #717171; display: block; } .stats b { font: 700 22px Roboto, var(--f-b); color: var(--pc); transition: color .35s; }
.mrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.leg { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font: 500 13px var(--f-b); color: var(--text-2); } .leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; } .leg u { text-decoration: none; }
.leg .l1 { background: #adadad; } .leg .l2 { background: var(--pc); transition: background .35s; } .leg .l3 { background: linear-gradient(90deg, #27991F, #FF9500, #991F1F); }
@media (max-width: 640px) { .mapp { grid-template-columns: 1fr; } .mapp aside { grid-auto-flow: column; overflow: auto; border-right: 0; border-bottom: 1px solid #e6e3de; } .stats { grid-template-columns: 1fr; } }
.c1-pcols { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.c1-pcols li { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 2px 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); } .c1-pcols i { width: 22px; height: 22px; border-radius: 6px; grid-row: span 2; } .c1-pcols .no { display: none; } .c1-pcols b { font: 600 14px var(--f-b); color: var(--text); } .c1-pcols code { font: 12px ui-monospace, Menlo, monospace; color: var(--text-2); }
.sd small { order: -1; } .sd .big { margin-top: 4px; }
.c1-basics { margin-top: var(--s-7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.c1-basics .bl { grid-column: 1 / -1; display: grid; gap: 8px; } .c1-basics h3 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; } .c1-basics p { margin: 0; max-width: 52ch; }
.stat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .stat li { display: grid; grid-template-columns: 22px 80px 80px 1fr; align-items: center; gap: 10px; font: 14px var(--f-b); color: var(--text-2); } .stat i { width: 22px; height: 22px; border-radius: 6px; } .stat b { color: var(--text); } .stat code { font: 12px ui-monospace, Menlo, monospace; }
.grey b { font: 600 12px var(--f-b); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); } .grey ol { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(10, 1fr); border-radius: 8px; overflow: hidden; } .grey li { height: 56px; display: flex; align-items: flex-end; padding: 4px; font: 600 10px var(--f-b); } .grey li:nth-child(-n+4) { color: #202020; } .grey li:nth-child(n+5) { color: #fff; }
@media (max-width: 860px) { .c1-basics { grid-template-columns: 1fr; padding: var(--s-5); } .stat li { grid-template-columns: 22px 70px 74px 1fr; } }
.c1-sub { font: 600 15px var(--f-b); color: var(--text); margin: var(--s-7) 0 var(--s-4); }
.sc { background: #fff; color: #202020; border: 1px solid #dcd8d2; border-radius: var(--r-m); padding: var(--s-4); display: grid; gap: 10px; justify-items: start; font: 13px Roboto, var(--f-b); } .sc p { margin: 0; color: #717171; } .sc a { color: #007AFF; font-weight: 600; } .sc b { font-weight: 700; }
.c1-q { margin: var(--s-8) 0; padding: 0; font: 700 clamp(26px, 3.6vw, 46px)/1.12 var(--f-b); letter-spacing: -.03em; color: var(--text); max-width: 24ch; }
.c1-h3 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.03em; }
.c1-intro-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-6); align-items: center; padding: var(--s-6); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-l); margin-bottom: var(--s-5); } .c1-intro-card h4 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 8px; } .c1-intro-card p { margin: 0; }
.wr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .w { border-radius: var(--r-m); padding: 22px 14px; color: #fff; display: grid; gap: 6px; text-align: center; } .w b { font-size: 22px; } .w small { font: 600 12px var(--f-b); } .w.no { opacity: .8; }
@media (max-width: 860px) { .c1-intro-card { grid-template-columns: 1fr; padding: var(--s-5); } }
.mim { display: flex; align-items: center; gap: 16px; padding: 12px; background: var(--bg); border-radius: var(--r-m); } .mim .ck2 { width: 24px; height: 24px; border-radius: 50%; background: #27991F; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 13px; } .mim a { color: #007AFF; text-decoration: underline; font-weight: 600; } .mim .tg2 { margin-left: auto; width: 36px; height: 20px; border-radius: 10px; background: #27991F; position: relative; } .mim .tg2::after { content: ''; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.pr .pvis { min-height: 0; border: 0; background: var(--bg); }
.c1-biz { margin-top: var(--s-7); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-6); align-items: center; padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); } .c1-biz h3 { font-size: clamp(24px, 3vw, 36px); letter-spacing: -.025em; margin: 6px 0 10px; } .c1-biz p { margin: 0; }
.fan { display: flex; align-items: center; gap: 12px; } .fan span { font: 700 14px var(--f-b); padding: 12px 14px; background: var(--btn-bg); color: var(--btn-tx); border-radius: 10px; white-space: nowrap; } .fan i { font-style: normal; color: var(--text-2); } .fan div { display: flex; flex-direction: column; gap: 5px; flex: 1; } .fan div i { height: 18px; border-radius: 5px; }
@media (max-width: 860px) { .c1-biz { grid-template-columns: 1fr; padding: var(--s-5); } }
.c1-note { margin-top: var(--s-5); font-size: 15px; } .c1-note b { color: var(--text); }

/* before / after */
.c1-ba { margin: 0; } .ba-in { position: relative; aspect-ratio: 19 / 10; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: var(--surface); --p: 50%; user-select: none; touch-action: pan-y; }
.ba-pane { position: absolute; inset: 0; } .ba-pane img { width: 100%; height: 100%; object-fit: cover; display: block; } .ba-pane.before { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba-pane .ph { display: none; position: absolute; inset: 0; place-items: center; align-content: center; text-align: center; gap: 4px; font: 13px var(--f-b); color: var(--text-2); background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 12px, var(--bg) 12px, var(--bg) 24px); }
.ba-pane.miss .ph { display: grid; } .ba-pane .ph b { font: 700 22px var(--f-b); color: var(--text); } .ba-pane.after .ph { background: repeating-linear-gradient(45deg, #E4F3E2, #E4F3E2 12px, #F3FAF2 12px, #F3FAF2 24px); color: #076001; } .ba-pane.after .ph b { color: #076001; }
.ba-l { position: absolute; top: 14px; font: 600 12px var(--f-b); background: rgba(23, 22, 21, .75); color: #fff; padding: 5px 10px; border-radius: 99px; pointer-events: none; } .ba-l.l { left: 14px; } .ba-l.r { right: 14px; }
.ba-h { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; } .ba-h i { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); } .ba-h i::before { content: '‹ ›'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 16px var(--f-b); color: #202020; letter-spacing: 2px; }
.ba-r { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-t { display: inline-flex; margin-top: 14px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; } .ba-t button { border: 0; background: none; color: var(--text-2); font: 600 13px var(--f-b); padding: 8px 16px; border-radius: 99px; cursor: pointer; min-height: 36px; } .ba-t button.on { background: var(--btn-bg); color: var(--btn-tx); }
.c1-ba figcaption { margin-top: 14px; color: var(--text-2); max-width: 60ch; } .c1-ba figcaption b { color: var(--text); }

/* workflow */
.c1-flow { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s-5); } .ft { display: inline-flex; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; } .ft button { border: 0; background: none; color: var(--text-2); font: 600 14px var(--f-b); padding: 10px 18px; border-radius: 99px; cursor: pointer; min-height: 40px; } .ft button[aria-selected="true"] { background: var(--btn-bg); color: var(--btn-tx); }
.c1-flow ol { list-style: none; margin: var(--s-5) 0 var(--s-4); padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .c1-flow li { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg); display: grid; gap: 14px; align-content: space-between; min-height: 120px; transition: border-color .3s, background .3s; }
.c1-flow li span { font: 700 12px var(--f-b); color: var(--accent); } .c1-flow li b { font: 600 16px/1.25 var(--f-b); color: var(--text); transition: opacity .2s; } .c1-flow[data-m="b"] li { border-style: dashed; } .c1-flow[data-m="b"] li:last-child { border-color: #991F1F; } .c1-flow[data-m="a"] li:last-child { border-color: #27991F; }
.c1-flow .fn, .fn { margin: 0; font-size: 13px; color: var(--text-2); }
@media (max-width: 900px) { .c1-flow ol { grid-template-columns: 1fr; } .c1-flow li { min-height: 0; grid-template-columns: 28px 1fr; align-items: center; } }

/* impact */
.oc .big { display: flex; align-items: baseline; gap: 14px; font: 700 clamp(48px, 7vw, 84px)/1 var(--f-b); letter-spacing: -.04em; color: var(--text); } .oc .big i { font-style: normal; color: var(--accent); }
.c1-end { margin-top: var(--section-y); padding: var(--s-8) 0 0; border-top: 1px solid var(--line); text-align: center; display: grid; gap: var(--s-5); justify-items: center; } .c1-end p { font: 700 clamp(30px, 5vw, 60px)/1.08 var(--f-b); letter-spacing: -.035em; color: var(--text); margin: 0; } .c1-end div { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .c1 * { transition: none !important; } }
.c1 { padding-inline: var(--gutter); }
.ba-pane.before .ph { padding-right: calc(100% - var(--p)); box-sizing: border-box; }
.ba-pane.after .ph { padding-left: var(--p); box-sizing: border-box; }
@media (max-width: 900px), (pointer: coarse) { .cs-back { margin-top: 118px !important; } .c1-hero { padding-top: var(--s-5); } .ba-in { aspect-ratio: 3 / 2; } }
@media (max-width: 900px), (pointer: coarse) { .cs-back { margin-top: 150px !important; margin-bottom: 0; } .cs-back .link { font-size: 15px; } .c1-hero { padding-top: var(--s-7); } }
.pk[aria-pressed="true"] { box-shadow: none; border-color: var(--pc); background: color-mix(in srgb, var(--pc) 10%, var(--bg)); }

/* full-page case study overlay */
dialog.projdlg { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--text); overflow: hidden; }
dialog.projdlg[open] { display: block; animation: pjIn 420ms cubic-bezier(.2, .8, .2, 1) both; } dialog.projdlg.out { animation: pjOut 320ms ease-in both; }
dialog.projdlg::backdrop { background: var(--bg); }
@keyframes pjIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes pjOut { to { opacity: 0; transform: translateY(24px); } }
.projdlg .pj-body { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; outline: none; overscroll-behavior: contain; scroll-behavior: smooth; }
.projdlg .pj-body .themesw { display: none; }
.projdlg .pj-sw { position: fixed; bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); right: var(--s-4); z-index: 10; }
@media (max-width: 760px) { .projdlg .pj-sw { display: none; } }
.projdlg .pj-top { position: absolute; top: 14px; right: 14px; z-index: 10; }
.projdlg .close, .pclose { position: static; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--sh-2); cursor: pointer; }
.projdlg .c1-hero { padding-top: 72px; } .projdlg .c1-menu { left: max(14px, calc((100vw - var(--contentw)) / 2 - 168px)); }
@media (max-width: 900px), (pointer: coarse) { .projdlg .c1-hero { padding-top: 76px; } }
html.pj-open { overflow: hidden; }
/* close button on the standalone case study page */
.pclose { position: fixed; top: 14px; right: 14px; z-index: 60; text-decoration: none; }
.chips.more { gap: 8px; } .chips.more em { font-size: 13px; padding: 7px 12px; } .chips.more em:last-child { background: var(--btn-bg); color: var(--btn-tx); border-color: var(--btn-bg); }
.acts { display: grid; gap: 8px; margin-top: 6px; }
.acts > div { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 6px; padding: 8px 10px; background: var(--bg); border-radius: var(--r-m); border-left: 4px solid var(--pc); font: 600 12px var(--f-b); }
.acts > div i { display: none; } .acts b { color: var(--text-2); font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acts span { padding: 6px 10px; border-radius: 7px; font-size: 12px; }
.acts .cn { background: #ededed; color: #373737; } .acts .dl { background: #991F1F; color: #fff; } .acts .sv2 { background: #27991F; color: #fff; }
@media (max-width: 420px) { .acts b { grid-column: 1 / -1; } .acts > div { grid-template-columns: auto auto auto 1fr; } }
.acts > div { grid-template-columns: auto auto auto 1fr; row-gap: 6px; } .acts b { grid-column: 1 / -1; font-size: 11px; letter-spacing: .02em; }
.ba-pane img { object-position: left top; }
@media (min-width: 901px) {
  .c1-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--s-7); align-items: end; }
  .c1-hero > * { grid-column: 1 / -1; }
  .c1-hero > .c1-h1 { grid-column: 1; grid-row: 1; }
  .c1-hero > .c1-intro { grid-column: 2; grid-row: 1; margin: 0 0 var(--s-3); max-width: 30ch; justify-self: end; }
  .c1-hero > .c1-sheet { margin-top: var(--s-7); }
}
@media (min-width: 901px) {
  .c1-hero { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); column-gap: var(--s-6); }
  .c1-hero > .c1-h1 { font-size: clamp(44px, 5.6vw, 84px); }
  .c1-hero > .c1-intro { max-width: 26ch; font-size: clamp(16px, 1.5vw, 20px); }
}

.c1-tw { position: relative; margin-top: var(--s-7); }
.c1-tw .c1-tldr { margin-top: 0; }
.c1-bub { position: absolute; right: var(--s-6); bottom: calc(100% + 14px); margin: 0; z-index: 3; display: flex; align-items: center; gap: 10px; background: var(--text); color: var(--bg); font: 500 15px/1.35 var(--f-b); padding: 10px 12px 10px 16px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.c1-bub[hidden] { display: none; }
.c1-bub.show { opacity: 1; transform: none; pointer-events: auto; }
.c1-bub::after { content: ''; position: absolute; right: 28px; top: 100%; width: 12px; height: 12px; background: inherit; transform: translateY(-6px) rotate(45deg); border-radius: 2px; }
.c1-bub button { all: unset; cursor: pointer; font-size: 18px; line-height: 1; opacity: .7; padding: 2px 6px; } .c1-bub button:hover { opacity: 1; }
@media (max-width: 640px) { .c1-bub { right: 12px; left: 12px; font-size: 14px; } .c1-bub::after { right: 24px; } }
@media (min-width: 1240px) and (max-width: 1479px) {
  .c1-menu, .projdlg .c1-menu { display: none; }
  .c1-menu a { white-space: nowrap; }
}
.c1 .c1-tw .c1-bub { background: #2b2420; color: #fffaf1; font-weight: 600; }
.c1 .c1-tw .c1-bub button { color: #fffaf1; opacity: .85; }
html[data-theme="night"] .c1 .c1-tw .c1-bub { background: #f6efe4; color: #2b2420; }
html[data-theme="night"] .c1 .c1-tw .c1-bub button { color: #2b2420; }
.c1-tldr dl div { align-items: baseline; padding: 16px 0; }
.c1-tldr dt { line-height: 1.6; } .c1-tldr dd { line-height: 1.6; }
@media (max-width: 640px) { .c1-tldr dl div { align-items: start; } }
.c1-layers { margin-top: var(--s-6); display: grid; gap: 10px; max-width: 760px; }
.c1-layers .ly { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r-m, 14px); padding: 16px 20px; background: var(--surface); }
.c1-layers .ly b { font: 700 17px var(--f-b); } .c1-layers .ly span { color: var(--text-2); font-size: 15px; }
.c1-layers .ly.t { margin-inline: 28px; border-style: dashed; } .c1-layers .ly.b { background: var(--text); border-color: var(--text); } .c1-layers .ly.b b { color: var(--bg); } .c1-layers .ly.b span { color: var(--bg); opacity: .8; }
.c1-layers .sw { display: inline-flex; gap: 6px; margin-left: auto; } .c1-layers .sw i { width: 18px; height: 18px; border-radius: 50%; display: block; }
.c1-principle { margin: var(--s-6) 0 0; font-size: 18px; color: var(--text); max-width: 60ch; } .c1-principle b { color: var(--accent-d, var(--accent)); }
.c1-colour { margin-top: var(--s-7); max-width: 66ch; } .c1-colour h3 { font: 700 26px var(--f-b); margin: 0 0 6px; } .c1-colour .lede2 { color: var(--text-2); margin: 0 0 12px; font-weight: 600; } .c1-colour p { margin: 0 0 12px; }
/* playful fun-fact note: tilted sticky card with a handwritten label */
.c1-colour.fun { position: relative; margin-top: var(--s-7); padding: var(--s-5) var(--s-5) var(--s-4); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 14px; transform: rotate(-.7deg); box-shadow: 4px 5px 0 color-mix(in srgb, var(--accent) 14%, transparent); }
.c1-colour.fun .fun-tag { display: inline-block; font: 700 20px/1 'Kalam', var(--f-b); color: var(--accent); transform: rotate(-3deg); margin-bottom: 10px; }
.c1-colour.fun h3 { font: 700 30px/1.15 'Kalam', var(--f-b); margin: 0 0 8px; }
.c1-endsub { display: block; margin-top: 14px; color: var(--text-2); font-size: 18px; }
@media (max-width: 640px) { .c1-layers .ly.t { margin-inline: 12px; } .c1-layers .sw { margin-left: 0; } }
.c1-principle + .c1-h3 { margin-top: var(--s-8, 72px); }
.c1-dark + .c1-layers { margin-top: var(--s-5); }
.c1 .c1-tw .c1-bub, .c1 .c1-tw .c1-bub * { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.c1-strip { height: 3px; border-radius: 2px; }
/* six product colours as a highlighter band under "Six products." */
.c1-h1 .six { padding: 0 .04em; background-image: linear-gradient(90deg, #076001 0 16.66%, #1470EF 16.66% 33.33%, #009688 33.33% 50%, #F38231 50% 66.66%, #1A47C1 66.66% 83.33%, #4521CA 83.33% 100%); background-repeat: no-repeat; background-size: 100% .17em; background-position: 0 88%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* cleaner hero: title left, intro + facts right, one calm visual below */
.c1 .c1-hero { display: block; padding-top: calc(var(--nav-h) + var(--s-6)); }
.c1 .c1-hero .c1-h1 { margin: 0; }
.c1 .c1-hero .c1-hr { margin-top: var(--s-6); }
.c1 .c1-hero .c1-intro { margin: 0 0 var(--s-6); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; color: var(--text-2); max-width: 34ch; justify-self: auto; }
.c1 .c1-hero .c1-det { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); border: 0; padding: 0; }
.c1 .c1-hero .c1-det > div:last-child { grid-column: 1 / -1; }
.c1 .c1-hero .c1-det dd { font-size: 16px; line-height: 1.5; }
.c1 .c1-hv { margin: var(--s-8, 72px) 0 0; border-radius: var(--r-l); overflow: hidden; background: var(--surface); border: 1px solid var(--line); aspect-ratio: 16 / 7; }
.c1 .c1-hv img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
@media (min-width: 901px) {
  .c1 .c1-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--s-8, 72px); align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 0; }
  .c1 .c1-hero .c1-h1 { grid-column: 1; grid-row: 1; font-size: clamp(44px, 6.2vw, 92px); padding-bottom: var(--s-8, 72px); }
  .c1 .c1-hero .c1-hr { grid-column: 2; grid-row: 1; margin-top: .6em; padding-left: var(--s-7); border-left: 1px solid var(--line); align-self: stretch; }
  .c1 .c1-hero .c1-hv { grid-column: 1 / -1; grid-row: 2; margin: 0 0 var(--s-7); }
}
@media (max-width: 900px) { .c1 .c1-hv { aspect-ratio: 4 / 3; } }
.c1 .c1-hero .c1-det { grid-template-columns: 1fr; gap: 0; }
.c1 .c1-hero .c1-det > div, .c1 .c1-hero .c1-det > div:last-child { grid-column: auto; display: grid; grid-template-columns: 92px 1fr; gap: var(--s-4); padding: 12px 0; border-top: 1px solid var(--line-soft, var(--line)); align-items: baseline; }
.c1 .c1-hero .c1-det dd { margin: 0; font-size: 15px; }
.c1 .c1-hero .c1-intro { font-size: clamp(18px, 1.5vw, 21px); margin-bottom: var(--s-5); }
@media (min-width: 901px) {
  .c1 .c1-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .c1 .c1-hero .c1-hr { padding-bottom: var(--s-7); }
  .c1 .c1-hero .c1-h1 { padding-bottom: 0; }
}
@media (min-width: 901px) { .c1 .c1-hero .c1-h1 { font-size: clamp(40px, 5.1vw, 78px); } .c1 .c1-h1 .six { white-space: nowrap; } }
/* replace the hard-stop band with six overlapping product dots */
.c1-h1 .six { background: none; padding: 0; }
.c1-h1 .dots { display: inline-flex; align-items: center; margin-left: .22em; vertical-align: .08em; }
.c1-h1 .dots i { display: block; width: .2em; height: .2em; border-radius: 50%; border: .028em solid var(--bg); margin-left: -.05em; }
.c1-h1 .dots i:first-child { margin-left: 0; }
.c1-h1 .dots { display: flex; gap: 10px; margin: .42em 0 0; vertical-align: baseline; }
.c1-h1 .dots i { width: 18px; height: 18px; border: 0; margin: 0; }
@media (min-width: 901px) { .c1 .c1-hero .c1-h1 { padding-bottom: var(--s-6); } }

/* ---- hero illustration (generated, minimal) ---- */
.c1 .c1-hv { aspect-ratio: auto; background: transparent; border: 0; border-radius: 0; overflow: visible; display: grid; gap: 14px; padding: 0; }
.c1 .c1-hv .hv-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--line); background: var(--surface); }
.c1 .c1-hv .hc { padding: 22px 16px 20px; display: grid; gap: 9px; align-content: start; border-left: 1px solid var(--line); }
.c1 .c1-hv .hc:first-child { border-left: 0; }
.c1 .c1-hv .hc b { font: 600 12px var(--f-b); color: var(--text-2); letter-spacing: .02em; margin-bottom: 8px; }
.c1 .c1-hv .hc i { display: block; height: 6px; border-radius: 3px; background: var(--line); } .c1 .c1-hv .hc i:nth-of-type(2) { width: 62%; }
.c1 .c1-hv .hc span { margin-top: 14px; justify-self: start; font: 600 12px var(--f-b); color: #fff; background: var(--pc); padding: 7px 14px; border-radius: 8px; }
.c1 .c1-hv .hv-base { border: 1px solid var(--line); padding: 14px 18px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; background: transparent; }
.c1 .c1-hv .hv-base b { font: 600 13px var(--f-b); } .c1 .c1-hv .hv-base span { font-size: 13px; color: var(--text-2); }
.c1 .c1-hv figcaption { font-size: 12px; color: var(--text-2); }
@media (max-width: 900px), (pointer: coarse) { .c1 .c1-hv .hv-row { grid-template-columns: repeat(2, 1fr); } .c1 .c1-hv .hc:nth-child(odd) { border-left: 0; } .c1 .c1-hv .hc:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---- hairline grid system for the whole case study ---- */
.c1 .c1-sec { border-top: 1px solid var(--line); margin-top: var(--s-8, 72px); padding-top: 0; }
.c1 .c1-sec > * { grid-column: 1 / -1; }
.c1 .pc, .c1 .sd, .c1 .c1-basics, .c1 .c1-biz, .c1 .c1-play, .c1 .c1-flow, .c1 .c1-tldr, .c1 .c1-dark, .c1 .c1-intro-card, .c1 .c1-ba .ba-in, .c1 .c1-end { border-radius: 0; box-shadow: none; }
.c1 .c1-3, .c1 .c1-2 { gap: 0; border: 1px solid var(--line); background: var(--surface); }
.c1 .c1-3 > .pc, .c1 .c1-2 > .sd, .c1 .c1-3 > article { border: 0; border-left: 1px solid var(--line); background: transparent; padding: var(--s-6); }
.c1 .c1-3 > :first-child, .c1 .c1-2 > :first-child { border-left: 0; }
.c1 .c1-3.sc3 { border: 0; background: transparent; } .c1 .c1-3.sc3 > * { border: 1px solid var(--line); margin-left: -1px; }
.c1 .c1-basics, .c1 .c1-biz, .c1 .c1-play, .c1 .c1-flow, .c1 .c1-tldr, .c1 .c1-intro-card { background: var(--surface); }
.c1 .c1-dark { background: transparent; color: var(--text); border: 1px solid var(--line); } .c1 .c1-dark b, .c1 .c1-dark p { color: var(--text-2); } .c1 .c1-dark p.q { color: var(--text); }
.c1 .c1-ba .ba-in { border: 1px solid var(--line); }
.c1 .c1-sec .c1-n { padding-top: var(--s-6); margin: 0 0 var(--s-5); }
@media (min-width: 901px) {
  .c1 { padding-inline: 0; border-inline: 1px solid var(--line); }
  .c1 .c1-hero, .c1 .c1-tw, .c1 .c1-end { padding-inline: var(--s-7); }
  .c1 .c1-hero { border-bottom: 1px solid var(--line); }
  .c1 .c1-tw { margin-top: 0; padding-block: var(--s-6); border-bottom: 1px solid var(--line); }
  .c1 .c1-tw .c1-tldr { margin-top: 0; }
  .c1 .c1-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; padding-inline: var(--s-7); padding-bottom: var(--s-7); margin-top: 0; }
  .c1 .c1-sec > .c1-n { grid-row: 1; }
  .c1 .c1-sec > h2 { grid-column: 1; grid-row: 2; font-size: clamp(30px, 3.6vw, 52px); padding-right: var(--s-6); align-self: start; }
  .c1 .c1-sec > h2 + .c1-lede { grid-column: 2; grid-row: 2; margin: 0 0 var(--s-7); padding-left: var(--s-6); border-left: 1px solid var(--line); align-self: stretch; }
  .c1 .c1-sec > h2 + .c1-lede + * { margin-top: var(--s-7); }
  .c1 .c1-sec > .c1-h3 { margin-top: var(--s-8, 72px); } .c1 .c1-sec > .c1-h3 + .c1-lede { max-width: 60ch; margin: var(--s-4) 0 var(--s-6); }
  .c1 .c1-sec { border-top: 1px solid var(--line); }
  .c1 .c1-sec:first-of-type { border-top: 0; }
  .c1 .c1-end { padding-bottom: var(--s-7); }
}
@media (max-width: 900px) { .c1 .c1-3, .c1 .c1-2 { grid-template-columns: 1fr; } .c1 .c1-3 > .pc, .c1 .c1-2 > .sd { border-left: 0; border-top: 1px solid var(--line); } .c1 .c1-3 > :first-child, .c1 .c1-2 > :first-child { border-top: 0; } }

.c1 .sc, .c1 .c1-layers .ly, .c1 .mock, .c1 .acts > div, .c1 .c1-intro-card .w { border-radius: 0; }
.c1 .c1-h1 .dots { display: flex; }
/* note-driven problem / question / facts sections */
.c1 .c1-pts ol { margin: 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 14px; }
.c1 .c1-pts li { counter-increment: p; display: grid; grid-template-columns: 28px 1fr; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.4; color: var(--text); }
.c1 .c1-pts li::before { content: counter(p) "."; color: var(--accent); font-weight: 700; }
.c1 .c1-hurt { margin: var(--s-5) 0 0; font-weight: 600; color: var(--accent); }
.c1 .c1-hurt::before { content: "\2197\00a0"; }
.c1 .c1-q2 p { font: 600 clamp(20px, 2vw, 26px)/1.3 var(--f-b); color: var(--text); letter-spacing: -.01em; max-width: none; margin: 0; }
.c1 .c1-facts .sd ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.c1 .c1-facts .sd li { position: relative; padding-left: 22px; line-height: 1.45; color: var(--text); }
.c1 .c1-facts .sd li::before { content: "\2192"; position: absolute; left: 0; color: var(--accent); }
.c1 .c1-3 .pc .pvis + h3 { margin-top: 6px; }
.c1 #question .c1-layers { margin-top: var(--s-7); max-width: none; }
.c1 #question > h2 + .c1-lede { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
.c1 #question { padding-bottom: var(--s-5); }
.c1 .c1-jobs blockquote { margin: 0; font: 600 clamp(20px, 2vw, 26px)/1.3 var(--f-b); letter-spacing: -.01em; color: var(--text); max-width: 30ch; }
.c1 .c1-jobs cite { display: block; margin-top: var(--s-4); font-style: normal; font-size: 14px; color: var(--text-2); }
.c1 .c1-principle { max-width: none; white-space: nowrap; }
@media (max-width: 640px) { .c1 .c1-principle { white-space: normal; } }
.c1 .c1-acc { color: var(--accent); font-weight: 600; }
/* slim banner */
.c1 .c1-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--s-7); margin-top: var(--s-6); border-block: 1px solid var(--line); background: var(--surface); }
.c1 .c1-banner p { margin: 0; font-size: 14px; color: var(--text); }
.c1 .c1-banner button { all: unset; cursor: pointer; font: 600 14px var(--f-b); color: var(--accent); white-space: nowrap; border-bottom: 1px solid currentColor; } .c1 .c1-banner button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 900px) { .c1 .c1-banner { padding: 10px 0; margin-inline: 0; flex-wrap: wrap; gap: 6px 16px; } }
@media (min-width: 901px) { .c1 .c1-hero { padding-top: var(--s-7); } }
/* project 02: embedded case study boards */
.cb { max-width: var(--contentw, 1080px); margin: var(--s-6) auto 0; padding-inline: var(--gutter, 20px); display: grid; gap: 0; justify-items: start; }
.cb-board { position: relative; overflow: hidden; background: var(--bg, #161616); border: 1px solid var(--line); border-top-width: 0; }
.cb-board:first-child { border-top-width: 1px; }
.cb-board iframe { display: block; border: 0; background: var(--bg, #161616); max-width: none; }
.cb { max-width: 1240px; justify-items: center; }
.cb { padding-inline: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 1280px) { .cb { width: calc(100% - 2 * var(--gutter, 16px)); } }

/* ---- project 02 additions ---- */
.c1 .c1-tl-p { margin: var(--s-5) 0 0; max-width: 70ch; color: var(--text); line-height: 1.55; }
@media (min-width: 901px) { .c1 .c1-hero .c1-h1.c1-h1-long { font-size: clamp(30px, 3.7vw, 56px); line-height: 1.08; } }
@media (max-width: 900px) { .c1 .c1-h1.c1-h1-long { font-size: clamp(30px, 8vw, 44px); line-height: 1.08; } }
.c1 .c1-ph { display: grid; place-items: center; min-height: 190px; border: 1px dashed var(--line); background: transparent; color: var(--text-2); font-size: 15px; text-align: center; padding: var(--s-5); }
.c1 .c1-ph.vid { min-height: 220px; }
.c1 .c1-oldnew .sd { gap: 14px; }
.c1 .c1-simpl { margin: var(--s-5) 0 0; color: var(--text); } .c1 .c1-simpl b { color: var(--text-2); font-weight: 600; letter-spacing: .02em; }
.c1 .c1-todo { color: var(--text-2); opacity: .85; font-style: normal; }
.c1 .oc .big.c1-todo span { color: var(--text-2); }

/* whiteboard with a handmade / clean toggle */
.c1 .wbd { margin: var(--s-7) 0 0; border: 1px solid var(--line); background: var(--surface); }
.c1 .wbd-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px var(--s-5); border-bottom: 1px solid var(--line); }
.c1 .wbd-bar b { font: 600 14px var(--f-b); color: var(--text); }
.c1 .wbd-tg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.c1 .wbd-tg button { all: unset; cursor: pointer; font: 600 13px var(--f-b); padding: 6px 14px; border-radius: 999px; color: var(--text-2); }
.c1 .wbd-tg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.c1 .wbd-tg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c1 .wbd-board { --ink: var(--text); --blue: #1d4ed8; padding: var(--s-7) var(--s-6) var(--s-6); text-align: center; }
html[data-theme="night"] .c1 .wbd-board { --blue: #8fb0ff; }
.c1 .wbd-t { margin: 0; display: inline-block; position: relative; font: 700 clamp(26px, 3.4vw, 40px)/1.1 var(--f-b); letter-spacing: -.02em; color: var(--ink); }
.c1 .wbd-ul { display: block; width: 100%; height: 10px; margin-top: 4px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.c1 .wbd-ul path { vector-effect: non-scaling-stroke; }
.c1 .wbd-q { margin: 14px 0 0; font: 600 clamp(18px, 2vw, 24px) var(--f-b); color: var(--blue); }
.c1 .wbd-ar { display: block; width: min(100%, 520px); height: 70px; margin: 8px auto 6px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.c1 .wbd-ar path { vector-effect: non-scaling-stroke; }
.c1 .wbd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); text-align: left; max-width: 860px; margin: 0 auto; }
.c1 .wbd-cols h4 { font: 700 clamp(22px, 2.4vw, 28px)/1.15 var(--f-b); letter-spacing: -.01em; color: var(--ink); margin: 0 0 12px; }
.c1 .wbd-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.c1 .wbd-cols li { color: var(--ink); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.4; padding-left: 20px; position: relative; }
.c1 .wbd-cols li::before { content: "\2013"; position: absolute; left: 0; }
/* clean */
.c1 .wbd[data-m="clean"] .ar-h, .c1 .wbd[data-m="clean"] .wbd-ul { display: none; }
.c1 .wbd[data-m="hand"] .ar-c { display: none; }
.c1 .wbd[data-m="clean"] .wbd-ar { stroke-width: 1.4; opacity: .55; }
.c1 .wbd[data-m="clean"] .wbd-cols > div { border: 1px solid var(--line); padding: var(--s-5); background: transparent; }
.c1 .wbd[data-m="clean"] .wbd-cols li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); top: .6em; }
/* handmade */
.c1 .wbd[data-m="hand"] .wbd-board { background-image: radial-gradient(color-mix(in srgb, var(--text) 14%, transparent) 1px, transparent 1.2px); background-size: 22px 22px; }
.c1 .wbd[data-m="hand"] .wbd-t, .c1 .wbd[data-m="hand"] .wbd-q, .c1 .wbd[data-m="hand"] .wbd-cols h4, .c1 .wbd[data-m="hand"] .wbd-cols li { font-family: "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; letter-spacing: 0; }
.c1 .wbd[data-m="hand"] .wbd-t { font-size: clamp(34px, 4.6vw, 54px); font-weight: 700; }
.c1 .wbd[data-m="hand"] .wbd-q { font-size: clamp(26px, 3vw, 34px); font-weight: 700; }
.c1 .wbd[data-m="hand"] .wbd-cols h4 { font-size: clamp(30px, 3.2vw, 38px); font-weight: 700; }
.c1 .wbd[data-m="hand"] .wbd-cols li { font-size: clamp(22px, 2.2vw, 27px); font-weight: 500; line-height: 1.2; }
@media (max-width: 700px) { .c1 .wbd-cols { grid-template-columns: 1fr; } .c1 .wbd-ar { height: 44px; } .c1 .wbd-board { padding-inline: var(--s-5); } }
.c1 .wbd-ar { width: min(100%, 440px); height: auto; aspect-ratio: 400 / 90; margin: 10px auto 12px; }
@media (max-width: 700px) { .c1 .wbd-ar { display: none; } }
.c1 .c1-2 > *, .c1 .c1-3 > * { min-width: 0; }
@media (max-width: 900px) { .c1 .c1-2, .c1 .c1-3 { grid-template-columns: minmax(0, 1fr); } }
.c1 .c1-ph { min-width: 0; }
.c1 .wbd-head { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c1 .wbd[data-m="clean"] .wbd-head { stroke-width: 1.6; opacity: .75; }
/* quick links: compact floating menu when the side column does not fit */
.c1 .c1-mt { display: none; }
@media (max-width: 1479px) {
  .c1-menu, .projdlg .c1-menu { display: flex; position: fixed; left: 16px; right: auto; top: auto; bottom: 16px; transform: none; flex-direction: column; align-items: flex-start; gap: 8px; z-index: 30; max-width: calc(100vw - 32px); }
  .c1-menu > b { display: none; }
  .c1-menu .c1-mt { order: 99; }
  .c1-menu .c1-mt { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 600 13px var(--f-b); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; box-shadow: var(--sh-1, 0 4px 14px rgba(0,0,0,.12)); }
  .c1-menu .c1-mt i { width: 7px; height: 7px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-135deg) translate(-1px, -1px); transition: transform .2s; }
  .c1-menu.open .c1-mt i { transform: rotate(45deg) translate(-1px, -1px); }
  .c1-menu .c1-mt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .c1-menu a { display: none; background: var(--surface); border: 1px solid var(--line); border-left-width: 2px; padding: 8px 14px; font-size: 14px; white-space: nowrap; }
  .c1-menu.open a { display: block; }
  .c1-menu a.on { border-left-color: var(--accent); color: var(--text); }
}
@media (min-width: 1480px) { .c1 .c1-mt, .c1-menu .c1-mt { display: none !important; } }
.c1 .wbd-cap { padding: 12px var(--s-5); border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.c1 .c1-two .sd { gap: 10px; padding: var(--s-6); } .c1 .c1-two .no { font: 700 13px var(--f-b); color: var(--accent); }
.c1 .c1-two h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.015em; }
.c1 #approach > .c1-two { margin-top: var(--s-7); }
.c1 .c1-concl { margin: var(--s-7) 0 var(--s-5); font: 600 clamp(20px, 2.2vw, 28px)/1.25 var(--f-b); letter-spacing: -.01em; color: var(--text); }
@media (min-width: 901px) { .c1 .c1-sec > .c1-concl { grid-column: 1 / -1; } }
.c1 #facts > .c1-two { margin-top: 0; }
/* skeleton of the original experience */
.c1 .c1-persona .c1-for { margin: 0 0 var(--s-4); color: var(--text); font-weight: 600; } .c1 .c1-persona .c1-for b { color: var(--text-2); font-weight: 600; letter-spacing: .02em; }
.c1 .sk-fig { margin: var(--s-7) 0 0; }
.c1 .sk-wrap { border: 1px solid var(--line); background: var(--surface); padding: var(--s-5); }
.c1 .sk { display: block; width: 100%; height: auto; --sk: color-mix(in srgb, var(--text) 13%, transparent); --sk2: color-mix(in srgb, var(--text) 22%, transparent); }
.c1 .sk-frame { fill: transparent; stroke: var(--line); stroke-width: 1.5; }
.c1 .sk-side { fill: color-mix(in srgb, var(--text) 5%, transparent); }
.c1 .sk-b { fill: var(--sk); } .c1 .sk-b2 { fill: var(--sk2); }
.c1 .sk-ba { fill: var(--accent); opacity: .9; } .c1 .sk-hl { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.c1 .sk-btn { fill: var(--sk2); } .c1 .sk-rule { stroke: var(--line); stroke-width: 1; fill: none; }
.c1 .sk-p1 { fill: color-mix(in srgb, #c0392b 22%, transparent); } .c1 .sk-p2 { fill: color-mix(in srgb, #e0a100 26%, transparent); } .c1 .sk-p3 { fill: color-mix(in srgb, var(--text) 16%, transparent); }
.c1 .sk-focus { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .7; }
.c1 .sk-m circle { fill: var(--accent); } .c1 .sk-m text { fill: #fff; font: 700 14px var(--f-b); }
.c1 .sk-fig figcaption { margin-top: 12px; font-size: 14px; color: var(--text-2); max-width: 70ch; }
.c1 .c1-fixpts { margin-top: var(--s-6); }
@media (max-width: 700px) { .c1 .sk-wrap { padding: var(--s-3); } }
/* real screen with placeholder content */
.c1 .sk-shot { position: relative; }
.c1 .sk-img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
html[data-theme="night"] .c1 .sk-img { filter: brightness(.9); }
.c1 .sk-pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 13px/26px var(--f-b); text-align: center; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
html[data-theme="night"] .c1 .sk-pin { color: #1b1a18; }
@media (max-width: 700px) { .c1 .sk-pin { width: 20px; height: 20px; font-size: 11px; line-height: 20px; } }
.c1 .sk-pin { width: auto; height: auto; display: inline-flex; align-items: center; gap: 8px; background: none; box-shadow: none; color: inherit; line-height: 1; transform: translate(-13px, -50%); white-space: nowrap; }
.c1 .sk-pin b { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 13px/26px var(--f-b); text-align: center; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); flex: none; }
.c1 .sk-pin i { font: 600 13px var(--f-b); font-style: normal; color: #1b1a18; background: rgba(255,255,255,.94); border: 1px solid var(--line); padding: 5px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
html[data-theme="night"] .c1 .sk-pin b { color: #1b1a18; }
@media (max-width: 700px) { .c1 .sk-pin b { width: 18px; height: 18px; font-size: 10px; line-height: 18px; } .c1 .sk-pin i { font-size: 10px; padding: 3px 7px; } .c1 .sk-pin { gap: 4px; transform: translate(-9px, -50%); } }

/* ---- project 02: lighter, less boxy ---- */
.c1 .sk-wrap { border: 0; background: transparent; padding: 0; }
.c1 .sk-chrome { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 44px -20px rgba(40, 30, 20, .28); }
.c1 .sk-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #eceef1; }
.c1 .sk-bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfd3da; }
.c1 .sk-url { flex: 1; max-width: 42%; height: 18px; margin-left: 14px; border-radius: 9px; background: #fff; }
.c1 .sk-img { border: 0; }
.c2 { border-inline: 0; }
.c2 .c1-tldr { background: transparent; border: 0; border-block: 1px solid var(--line); border-radius: 0; padding-inline: 0; }
.c2 .c1-2, .c2 .c1-3 { border: 0; background: transparent; gap: var(--s-7); }
.c2 .c1-2 > .sd, .c2 .c1-3 > .pc { border: 0; border-top: 1px solid var(--line); background: transparent; padding: var(--s-4) 0 0; }
.c2 .c1-2 > :first-child, .c2 .c1-3 > :first-child { border-left: 0; }
.c2 .c1-ph { border: 0; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); min-height: 180px; }
.c2 .wbd { border: 0; background: transparent; }
.c2 .wbd-bar { border-bottom: 0; padding-inline: 0; }
.c2 .wbd-board { border-radius: 14px; background-color: color-mix(in srgb, var(--text) 4%, transparent); }
.c2 .wbd-cap { border-top: 0; padding-inline: 0; }
.c2 .c1-banner { background: transparent; }
@media (min-width: 901px) {
  .c2 .c1-hero .c1-hr, .c2 .c1-sec > h2 + .c1-lede { border-left: 0; padding-left: 0; }
}

/* ---- project 02: one clean grid (shared column line, no stray rules, no boxes) ---- */
.c2 .c1-tldr { border: 0; padding-block: var(--s-3); }
.c2 .c1-2, .c2 .c1-3 { gap: 0; }
.c2 .c1-2 > .sd, .c2 .c1-3 > .pc { border-top: 0; padding: var(--s-2) var(--s-6) var(--s-2) 0; }
.c2 .c1-2 > .sd + .sd, .c2 .c1-3 > .pc + .pc { border-left: 1px solid var(--line); padding-left: var(--s-6); padding-right: var(--s-5); }
.c2 .c1-concl { margin-bottom: var(--s-5); }
.c2 .oc .big { font-size: clamp(30px, 3.6vw, 52px); flex-wrap: wrap; gap: 10px; } .c2 .oc .big span { white-space: nowrap; }
.c2 .oc .big.c1-todo span { font-size: clamp(26px, 3vw, 40px); }
@media (min-width: 901px) {
  .c2 .c1-hero .c1-hr, .c2 .c1-sec > h2 + .c1-lede { border-left: 1px solid var(--line); padding-left: var(--s-6); }
  .c2 .c1-sec > h2 + .c1-lede + * { margin-top: var(--s-7); }
}
@media (max-width: 900px) {
  .c2 .c1-2 > .sd + .sd, .c2 .c1-3 > .pc + .pc { border-left: 0; border-top: 1px solid var(--line); padding: var(--s-5) 0 0; margin-top: var(--s-5); }
  .c2 .c1-2 > .sd, .c2 .c1-3 > .pc { padding-right: 0; }
}
/* project 02 hero: product logo + site link */
.c1 .c1-hl { display: contents; }
@media (min-width: 901px) { .c2 .c1-hero .c1-hl { display: block; grid-column: 1; grid-row: 1; } .c2 .c1-hero .c1-hl .c1-h1 { grid-column: auto; padding-bottom: var(--s-6); } }
.c2 .c1-logo { display: block; height: 60px; width: auto; margin: 0 0 var(--s-5); }
html[data-theme="night"] .c2 .c1-logo { background: #fff; padding: 6px 10px; border-radius: 8px; height: 64px; box-sizing: border-box; }
.c2 .c1-site { display: inline-block; margin-top: var(--s-5); font: 600 15px var(--f-b); color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.c2 .c1-site:hover { opacity: .8; } .c2 .c1-site:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* project 02 facts: one row per idea, label left, content right, on the shared column line */
.c2 .fxs { grid-column: 1 / -1; margin-top: var(--s-7); }
.c2 .fxr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line); padding: var(--s-6) 0; }
.c2 .fxr h3 { font: 700 clamp(20px, 2vw, 26px)/1.2 var(--f-b); letter-spacing: -.015em; padding-right: var(--s-6); max-width: 22ch; }
.c2 .fxr ul, .c2 .fxr ol { margin: 0; padding: 0 0 0 var(--s-6); border-left: 1px solid var(--line); list-style: none; display: grid; gap: 14px; }
.c2 .fxr li { position: relative; padding-left: 22px; line-height: 1.45; color: var(--text); }
.c2 .fxr ul li::before { content: "\2192"; position: absolute; left: 0; color: var(--accent); }
.c2 .fxr ol { counter-reset: n; } .c2 .fxr ol li { counter-increment: n; font: 600 clamp(18px, 1.8vw, 22px)/1.3 var(--f-b); } .c2 .fxr ol li::before { content: counter(n) "."; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
@media (max-width: 900px) { .c2 .fxr { grid-template-columns: 1fr; gap: var(--s-4); } .c2 .fxr h3 { max-width: none; padding-right: 0; } .c2 .fxr ul, .c2 .fxr ol { border-left: 0; padding-left: 0; } }
.c2 .fxr ol li { padding-left: 30px; }
.c2 .fxr ol li b { display: block; font: 600 12px var(--f-b); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.c2 .fxr ol li::before { display: none; }
.c2 .fxr ol li { padding-left: 0; }
.c2 .fxr:has(.fx-next) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.c2 .fxr .fx-next { grid-column: 2; margin: var(--s-5) 0 0 var(--s-6); font: 600 15px var(--f-b); color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; justify-self: start; padding-bottom: 2px; }
@media (max-width: 900px) { .c2 .fxr .fx-next { grid-column: 1; margin-left: 0; } }
.c2 .c1-recall { color: var(--text) !important; font-weight: 600; margin: 0 0 var(--s-3) !important; }
.c1 .wbd-part { display: block; margin: 0 0 4px; font: 700 12px var(--f-b); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.c1 .wbd[data-m="hand"] .wbd-part { font: 700 clamp(22px, 2.2vw, 26px) "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; letter-spacing: 0; text-transform: none; color: var(--blue); }
@media (min-width: 901px) { .c2 #facts > h2 { grid-column: 1 / -1; padding-right: 0; } }
.c2 .fxs > .fxr:first-child { border-top: 0; padding-top: 0; }

/* ---- visual cues: interactive skeleton stage ---- */
.c2 .vc { grid-column: 1 / -1; margin-top: var(--s-6); display: grid; gap: var(--s-5); }
.vc-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vc-tabs button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; padding: 12px 12px 12px 0; margin-right: 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-2); }
.vc-tabs b { font: 700 12px var(--f-b); color: var(--accent); } .vc-tabs span { font: 600 14px/1.25 var(--f-b); color: var(--text); } .vc-tabs em { font: 500 12px var(--f-b); font-style: normal; }
.vc-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); } .vc-tabs button:not([aria-selected="true"]):hover span { color: var(--accent); }
.vc-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.vc-stage { --g1: color-mix(in srgb, var(--text) 9%, transparent); --g2: color-mix(in srgb, var(--text) 16%, transparent); --pn: #fff; --pt: #25211e; --pl: #e4e0da;
  container-type: inline-size; position: relative; aspect-ratio: 16 / 9.4; overflow: hidden; border-radius: 12px; background: #f4f2ef; box-shadow: 0 0 0 1px var(--line); font-size: clamp(9px, 1.45cqw, 15px); color: var(--pt); }
html[data-theme="night"] .vc-stage { --g1: rgba(255,255,255,.07); --g2: rgba(255,255,255,.13); --pn: #2a2825; --pt: #ece7e0; --pl: #3a3733; background: #1f1d1b; }
.vc-stage i { display: block; height: .7em; border-radius: .35em; background: var(--g2); }
.vc-stage .w1 { width: 38%; } .vc-stage .w2 { width: 62%; } .vc-stage .w3 { width: 84%; }
.vc-app { position: absolute; inset: 0; display: grid; grid-template: 8.5% 1fr / 15% 1fr; }
.vc-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 1em; padding: 0 2em 0 1.6em; background: var(--pn); border-bottom: 1px solid var(--pl); }
.vc-top > i { width: 14%; } .vc-sp { flex: 1; } .vc-logo { width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--g2); }
.vc-pill { all: unset; padding: .35em .9em; border-radius: 99em; background: var(--g1); font: 700 .85em var(--f-b); color: var(--pt); transition: box-shadow .25s, background .25s; }
.vc-gp { display: inline-flex; align-items: center; gap: .5em; padding: .3em .8em .3em .4em; border-radius: 99em; background: var(--g1); color: var(--g2); transition: box-shadow .25s; } .vc-gp svg { width: 1.7em; height: 1.7em; } .vc-gp i { width: 5em; }
.vc-dot { width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--g2); }
.vc-side { padding: 1.4em 1em; display: grid; gap: 1.1em; align-content: start; background: color-mix(in srgb, var(--pn) 70%, transparent); border-right: 1px solid var(--pl); } .vc-side i { height: 1.8em; border-radius: .5em; background: var(--g1); } .vc-side i.on { background: var(--g2); }
.vc-main { padding: 2em 2.4em; display: grid; gap: 1.6em; align-content: start; } .vc-main .h { width: 24%; height: 1.2em; }
.vc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; } .vc-cards span { height: 7em; border-radius: .8em; background: var(--pn); box-shadow: 0 0 0 1px var(--pl); }
.vc-rows { display: grid; gap: 1.5em; } .vc-rows i { height: .8em; background: var(--g1); }
.vc-scrim { position: absolute; inset: 8.5% 0 0 0; background: rgba(20, 16, 12, .0); transition: background .3s; pointer-events: none; }
[data-k="landing"] .vc-scrim, [data-k="success"] .vc-scrim { background: rgba(20, 16, 12, .38); }

.vc-p { position: absolute; background: var(--pn); color: var(--pt); box-shadow: 0 0 0 1px var(--pl), 0 1.6em 3.6em -1em rgba(20, 14, 8, .38); opacity: 0; visibility: hidden; transform: translateY(.8em) scale(.985); transition: opacity .3s ease, transform .3s ease, visibility 0s .3s; }
.vc[data-k="country"] [data-p="country"], .vc[data-k="landing"] [data-p="landing"], .vc[data-k="success"] [data-p="success"], .vc[data-k="support"] [data-p="support"], .vc[data-k="guide"] [data-p="guide"], .vc[data-k="history"] [data-p="history"] { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease; }
.vc-p button { font-family: var(--f-b); }
.vc-p b { font-weight: 700; } .vc-p small { font: 600 .8em var(--f-b); color: color-mix(in srgb, var(--pt) 60%, transparent); }
.vc-btn, .vc-ghost, .vc-cta { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: .7em 1.2em; border-radius: .5em; font: 600 .9em var(--f-b); } 
.vc-ghost { box-shadow: 0 0 0 1px var(--pl); color: var(--pt); } .vc-ghost:hover { background: var(--g1); }
.vc-cta, .vc-btn { background: #1d4ed8; color: #fff; } .vc-cta:hover, .vc-btn:hover { filter: brightness(1.1); }
.vc-p button:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }

/* highlight the real trigger in the top bar */
[data-k="country"] .vc-pill { box-shadow: 0 0 0 .22em color-mix(in srgb, var(--accent) 60%, transparent); background: var(--pn); }
[data-k="guide"] .vc-gp, [data-k="success"] .vc-gp { box-shadow: 0 0 0 .22em color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }

.vc-country { top: 9.5%; right: 24%; width: 24em; padding: 1.2em 1.4em; border-radius: .7em; display: grid; gap: .5em; justify-items: start; } .vc-country::before { content: ""; position: absolute; right: 2.4em; top: -.45em; width: .9em; height: .9em; background: var(--pn); transform: rotate(45deg); box-shadow: -1px -1px 0 var(--pl); }
.vc-ph { margin: 0; font: 700 1.25em/1.2 var(--f-b); } .vc-sub { margin: 0 0 .5em; font-size: .85em; opacity: .65; }
.vc-modal { left: 50%; top: 52%; width: 30em; transform: translate(-50%, calc(-50% + .8em)) scale(.985); padding: 1.5em; border-radius: .9em; display: grid; gap: 1em; }
.vc[data-k="landing"] .vc-modal[data-p="landing"], .vc[data-k="success"] .vc-modal[data-p="success"] { transform: translate(-50%, -50%); }
.vc-mh { display: flex; justify-content: space-between; align-items: center; font-size: 1.15em; } .vc-mh u { text-decoration: none; opacity: .5; }
.vc-note { padding: .9em; border-radius: .5em; background: color-mix(in srgb, #1d4ed8 11%, transparent); display: grid; gap: .5em; }
.vc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8em; } .vc-steps li { display: flex; align-items: center; gap: .9em; } .vc-steps li > b { flex: none; width: 2.1em; height: 2.1em; display: grid; place-items: center; border-radius: .5em; background: var(--g1); font-size: .85em; } .vc-steps li > span { flex: 1; display: grid; gap: .4em; }
.vc-succ { text-align: left; } .vc-big { font-size: 1.4em; line-height: 1.15; } .vc-succ p { margin: 0; opacity: .8; }
.vc-chk { width: 3.2em; height: 3.2em; color: #1f9d4c; } .vc-chk .c { stroke-dasharray: 107; stroke-dashoffset: 107; } .vc-chk .k { stroke-dasharray: 30; stroke-dashoffset: 30; }
.vc[data-k="success"] .vc-chk .c { animation: vcdraw .7s ease forwards; } .vc[data-k="success"] .vc-chk .k { animation: vcdraw .4s .55s ease forwards; } @keyframes vcdraw { to { stroke-dashoffset: 0; } }
.vc-two { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-top: .3em; } .vc-msg { min-height: 1.2em; color: var(--accent); }

.vc-sheet { right: 3%; bottom: 0; width: 38%; min-width: 22em; border-radius: .9em .9em 0 0; display: grid; align-content: start; gap: .9em; padding: 1.2em 1.4em 0; height: 72%; }
.vc-sh { display: flex; justify-content: space-between; align-items: center; font-size: 1.05em; padding-bottom: .8em; border-bottom: 1px solid var(--pl); } .vc-sh u { text-decoration: none; opacity: .5; margin-left: .9em; }
.vc-v { display: none; gap: .9em; align-content: start; position: relative; height: 100%; } .vc-sup[data-v="help"] [data-view="help"], .vc-sup[data-v="contact"] [data-view="contact"], .vc-sup[data-v="faq"] [data-view="faq"] { display: grid; animation: vcin .28s ease; } @keyframes vcin { from { opacity: 0; transform: translateX(.8em); } }
.vc-sup { grid-template-rows: auto 1fr; } .vc-search { display: flex; justify-content: space-between; align-items: center; padding: .8em 1em; border-radius: .5em; box-shadow: 0 0 0 1px var(--pl); } .vc-search i { width: 50%; } .vc-search u { text-decoration: none; opacity: .5; }
.vc-ths { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; } .vc-th { display: grid; gap: .5em; } .vc-th span { display: block; aspect-ratio: 16 / 10; border-radius: .5em; background: var(--g1); position: relative; } .vc-th span::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-left: .9em solid var(--g2); border-top: .55em solid transparent; border-bottom: .55em solid transparent; }
.vc-ft { position: absolute; left: 0; right: 0; bottom: 1em; display: flex; justify-content: space-between; gap: .8em; } .vc-fld { padding: .9em 1em; border-radius: .5em; box-shadow: 0 0 0 1px var(--pl); } .vc-fld.tall { padding-bottom: 2.4em; } .vc-fld i { height: .6em; }
.vc-v .vc-cta { justify-self: stretch; }
.vc-faq { list-style: none; margin: 0; padding: 0; display: grid; gap: .6em; } .vc-faq li { display: flex; gap: .9em; align-items: center; padding: .8em 1em; border-radius: .5em; box-shadow: 0 0 0 1px var(--pl); } .vc-faq li b { opacity: .55; } .vc-faq li i { width: 70%; }

.vc-gd small.vc-cnt { color: var(--accent); }
.vc-bar { height: .5em; border-radius: 99em; background: var(--g1); overflow: hidden; } .vc-bar i { height: 100%; width: 60%; border-radius: 99em; background: #1f9d4c; transition: width .5s ease; }
.vc-gl { list-style: none; margin: .3em 0 0; padding: 0; display: grid; gap: 1em; } .vc-gl li { display: flex; align-items: center; gap: .9em; } .vc-gl u { flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; box-shadow: inset 0 0 0 .18em #e0a100; transition: all .3s; } .vc-gl li.dn u { background: #1f9d4c; box-shadow: none; }
.vc-nudge { position: absolute; left: 1.4em; right: 1.4em; bottom: 1.2em; display: flex; justify-content: space-between; align-items: center; padding: .8em 1em; border-radius: .6em; background: color-mix(in srgb, #e0a100 16%, transparent); font: 600 .85em var(--f-b); } .vc-nudge button { all: unset; cursor: pointer; font-weight: 700; color: #1d4ed8; } .vc-nudge button:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
html[data-theme="night"] .vc-nudge button { color: #8fb0ff; }

.vc-vh { right: 1.5%; top: 9.5%; bottom: 3%; width: 25%; min-width: 18em; border-radius: .7em; padding: 1.1em 1.3em; display: grid; grid-template-rows: auto 1fr; gap: .6em; overflow: hidden; }
.vc-vl { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; align-content: start; overflow: hidden; } .vc-vl li { display: grid; grid-template-columns: .6em 1fr auto auto; align-items: center; gap: .8em; padding: .55em .5em; border-radius: .4em; cursor: pointer; transition: background .2s; } .vc-vl li:hover, .vc-vl li.sel { background: var(--g1); }
.vc-vl li u { width: .5em; height: .5em; border-radius: 50%; background: #1d4ed8; } .vc-vl li span { display: grid; gap: .35em; } .vc-vl li s { width: .25em; height: 1.1em; background: radial-gradient(circle, var(--g2) 45%, transparent 50%) 0 0 / 100% 33%; }
.vc-vl em { font: 700 .72em var(--f-b); font-style: normal; padding: .2em .7em; border-radius: 99em; } .vc-vl em.cur { background: color-mix(in srgb, #1f9d4c 22%, transparent); color: #1f7a3c; } .vc-vl em.nm { background: color-mix(in srgb, #1d4ed8 16%, transparent); color: #1d4ed8; } html[data-theme="night"] .vc-vl em.nm { color: #8fb0ff; } html[data-theme="night"] .vc-vl em.cur { color: #6fd08c; }

.vc-info { position: relative; min-height: 15em; }
.vc-info > div { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-7); row-gap: var(--s-3); align-items: start; animation: vcin .3s ease; }
.vc[data-k="country"] [data-i="country"], .vc[data-k="landing"] [data-i="landing"], .vc[data-k="success"] [data-i="success"], .vc[data-k="support"] [data-i="support"], .vc[data-k="guide"] [data-i="guide"], .vc[data-k="history"] [data-i="history"] { display: grid; }
.vc-info h3 { grid-column: 1; grid-row: 1 / span 2; font: 700 clamp(24px, 2.8vw, 38px)/1.12 var(--f-b); letter-spacing: -.02em; }
.vc-info p { grid-column: 2; margin: 0; font-size: clamp(16px, 1.4vw, 19px); color: var(--text); max-width: 46ch; }
.vc-info dl { grid-column: 2; display: grid; grid-template-columns: auto 1fr; gap: 8px var(--s-4); margin: var(--s-3) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.vc-info dt { font: 600 12px var(--f-b); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); padding-top: 3px; } .vc-info dd { margin: 0; color: var(--text); }
.vc-cap { margin: 0; font-size: 13px; color: var(--text-2); }
@media (max-width: 900px) {
  .vc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vc-tabs button { padding-right: 6px; }
  .vc-stage { aspect-ratio: 4 / 5; font-size: clamp(9px, 2.6cqw, 13px); } .vc-app { grid-template: 7% 1fr / 0 1fr; } .vc-side { display: none; } .vc-top > i, .vc-gp i { display: none; }
  .vc-scrim { inset: 7% 0 0 0; }
  .vc-info > div { grid-template-columns: 1fr; } .vc-info h3, .vc-info p, .vc-info dl { grid-column: 1; grid-row: auto; }
  .vc-modal { width: 88%; } .vc-sheet { right: 3%; left: 3%; width: auto; min-width: 0; height: 74%; } .vc-vh { left: 8%; right: 2%; width: auto; min-width: 0; top: 8%; } .vc-country { left: 5%; right: 5%; width: auto; top: 8%; }
}
@media (prefers-reduced-motion: reduce) { .vc-p, .vc-info > div, .vc-v { transition: none !important; animation: none !important; } .vc-chk .c, .vc-chk .k { animation: none !important; stroke-dashoffset: 0 !important; } }

/* tabs: clear, clickable chips */
.vc-tabs { gap: 10px; border: 0; }
.vc-tabs button { margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: transparent; transition: background .2s, border-color .2s, transform .15s, box-shadow .2s; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.vc-tabs button b { grid-row: 1 / span 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.vc-tabs button:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(0,0,0,.35); }
.vc-tabs button[aria-selected="true"] { background: var(--text); border-color: var(--text); }
.vc-tabs button[aria-selected="true"] span { color: var(--bg); } .vc-tabs button[aria-selected="true"] em { color: var(--bg); opacity: .75; } .vc-tabs button[aria-selected="true"] b { background: var(--accent); color: #fff; }
.vc-tabs button { cursor: pointer; }
@media (max-width: 900px) { .vc-tabs button { padding: 8px 10px; } }
/* reasoning written on the screen */
.vc-note-on { position: absolute; left: 2.2%; top: 12%; width: 24%; z-index: 5; padding: 1.1em 1.2em; border-radius: .8em; background: var(--text); color: var(--bg); box-shadow: 0 1.2em 2.6em -1em rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(.6em); transition: opacity .3s, transform .3s, visibility 0s .3s; }
.vc[data-k="landing"] [data-nt="landing"], .vc[data-k="success"] [data-nt="success"], .vc[data-k="country"] [data-nt="country"], .vc[data-k="guide"] [data-nt="guide"], .vc[data-k="support"] [data-nt="support"], .vc[data-k="history"] [data-nt="history"] { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s; }
.vc-note-on b { font: 700 .75em var(--f-b); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.vc-note-on p { margin: .4em 0 .8em; font: 500 1.05em/1.35 var(--f-b); color: var(--bg); }
.vc-pr { display: inline-block; padding: .3em .8em; border-radius: 99em; font: 700 .8em var(--f-b); background: color-mix(in srgb, var(--bg) 18%, transparent); color: var(--bg); }
.vc-stage { aspect-ratio: 16 / 9.8; }
.vc-h2 { display: block; font-size: .95em; margin-bottom: .4em; }
.vc-modal { width: 31em; gap: .8em; left: 58%; } .vc[data-k="landing"] .vc-modal[data-p="landing"], .vc[data-k="success"] .vc-modal[data-p="success"] { }
.vc-succ { width: 27em; } .vc-q { font-weight: 600; opacity: 1 !important; }
.vc-search em, .vc-fld em, .vc-gl em { font: 500 .85em var(--f-b); font-style: normal; opacity: .55; }
.vc-gl em { opacity: .7; color: #1d4ed8; } .vc-2f { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; } .vc-fld { display: grid; gap: .5em; padding: .6em .9em; } .vc-fld.tall { padding-bottom: 2em; }
.vc-vl em.dt { background: none; padding: 0; font: 600 .8em var(--f-b); letter-spacing: 0; border-radius: 0; color: var(--pt); }
.vc-vl li span { gap: .4em; }
.vc-country { right: 24%; } 
@media (max-width: 900px) {
  .vc-stage { aspect-ratio: 4 / 6.4; }
  .vc-note-on { left: 4%; right: 4%; width: auto; top: 8%; padding: .8em 1em; }
  .vc-modal { left: 50%; top: 62%; width: 90%; } .vc-sheet { height: 62%; } .vc-vh { top: 36%; left: 8%; } .vc-country { top: 34%; }
}

.vc-vh { width: 30%; min-width: 22em; } .vc-vl em.dt { white-space: nowrap; font-size: .76em; }
@media (max-width: 900px) { .vc-vh { width: auto; min-width: 0; } .vc-vl em.dt { font-size: .7em; } }

/* modern segmented tabs */
.vc-tabs { position: relative; display: flex; gap: 0; padding: 5px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow-x: auto; scrollbar-width: none; --bw: calc(100% / 6); }
.vc-tabs::-webkit-scrollbar { display: none; }
.vc-ind { position: absolute; left: 5px; top: 5px; bottom: 5px; width: calc((100% - 10px) / 6); border-radius: 999px; background: var(--text); box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .35s cubic-bezier(.3,.8,.3,1); pointer-events: none; }
.vc-tabs button { position: relative; z-index: 1; flex: 1 0 calc((100% - 10px) / 6); display: flex; align-items: center; justify-content: center; gap: .6em; margin: 0; padding: 11px 10px; border: 0; border-radius: 999px; background: none; box-shadow: none; transform: none; transition: color .25s; color: var(--text-2); white-space: nowrap; }
.vc-tabs button:hover { background: none; box-shadow: none; transform: none; } .vc-tabs button:not([aria-selected="true"]):hover span { color: var(--text); }
.vc-tabs button b { grid-row: auto; width: auto; height: auto; background: none; font: 700 11px var(--f-b); color: inherit; opacity: .55; }
.vc-tabs button span { font: 600 14px var(--f-b); color: inherit; }
.vc-tabs button[aria-selected="true"] { background: none; color: var(--bg); } .vc-tabs button[aria-selected="true"] span { color: var(--bg); } .vc-tabs button[aria-selected="true"] b { background: none; color: var(--accent); opacity: 1; }
.vc-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 900px) { .vc-tabs button { flex: 0 0 auto; padding: 10px 16px; } .vc-ind { width: var(--iw, 140px); left: 0; top: 5px; transform: translateX(var(--ix, 5px)); } }
.vc-pl { display: block; margin-bottom: .5em; font: 600 .8em var(--f-b); opacity: .65; letter-spacing: .02em; }

.vc-ind { left: 0; width: var(--iw, 140px); transform: translateX(var(--ix, 5px)); }
.vc-tabs button { flex: 1 1 auto; }
@media (max-width: 900px) { .vc-tabs button { flex: 0 0 auto; } }

/* facts as a bento grid */
@media (min-width: 901px) {
  .c2 .fxs { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: auto auto; gap: 16px; margin-top: var(--s-6); }
  .c2 .fxs > .fxr:nth-child(1) { grid-row: 1 / span 2; }
  .c2 .fxs > .fxr:nth-child(3) { background: var(--text); color: var(--bg); }
}
.c2 .fxr, .c2 .fxs > .fxr:first-child { display: block; border: 0; border-radius: 20px; padding: var(--s-6); background: color-mix(in srgb, var(--text) 5.5%, transparent); }
.c2 .fxr h3 { max-width: none; padding: 0; margin-bottom: var(--s-4); font-size: clamp(20px, 1.9vw, 25px); }
.c2 .fxr ul, .c2 .fxr ol { border: 0; padding: 0; gap: 12px; }
.c2 .fxs > .fxr:nth-child(3) h3, .c2 .fxs > .fxr:nth-child(3) li { color: var(--bg); }
.c2 .fxs > .fxr:nth-child(3) li b { color: var(--accent); }
.c2 .fxs > .fxr:nth-child(3) .fx-next { margin: var(--s-4) 0 0; color: var(--bg); border-color: var(--accent); display: inline-block; }
@media (max-width: 900px) { .c2 .fxs { display: grid; gap: 12px; } .c2 .fxs > .fxr:nth-child(3) { background: var(--text); color: var(--bg); } }
@media (min-width: 901px) {
  .c2 .fxs { grid-template-columns: 1fr 1fr; }
  .c2 .fxs > .fxr:nth-child(1) { grid-row: auto; }
  .c2 .fxs > .fxr:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-7); align-items: center; }
  .c2 .fxs > .fxr:nth-child(3) h3 { margin: 0; font-size: clamp(22px, 2.4vw, 32px); }
  .c2 .fxs > .fxr:nth-child(3) ol { grid-column: 2; } .c2 .fxs > .fxr:nth-child(3) .fx-next { grid-column: 2; margin: var(--s-3) 0 0; justify-self: start; }
}
.c2 .c1-hl .c1-site { margin-top: 0; }
@media (min-width: 901px) { .c2 .c1-hero .c1-hl .c1-h1 { padding-bottom: var(--s-5); } .c2 .c1-hero .c1-hl { padding-bottom: var(--s-7); } }
@media (max-width: 900px) { .c2 .c1-hl { display: block; } .c2 .c1-hl .c1-site { margin: 0 0 var(--s-5); } }
/* two-part tile: compact */
.c2 .fxs > .fxr:nth-child(3) { padding-block: var(--s-4); }
.c2 .fxs > .fxr:nth-child(3) h3 { font-size: clamp(20px, 2vw, 26px); }
.c2 .fxs > .fxr:nth-child(3) ol { gap: 6px; }
.c2 .fxs > .fxr:nth-child(3) ol li { display: flex; align-items: baseline; gap: 12px; font: 500 clamp(15px, 1.3vw, 17px)/1.35 var(--f-b); }
.c2 .fxs > .fxr:nth-child(3) ol li b { display: inline; flex: none; margin: 0; font-size: 11px; }
.c2 .fxs > .fxr:nth-child(3) .fx-next { margin-top: var(--s-2); font-size: 13px; }

/* Phone: show all six visual-cue tabs as a 3x2 grid (no hidden sideways scroll) */
@media (max-width: 700px) {
  .vc-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 4px; border-radius: 18px; --bw: 0; }
  .vc-ind { display: none; }
  .vc-tabs button { flex: none; justify-content: center; text-align: center; white-space: normal; padding: 9px 6px; border-radius: 12px; line-height: 1.2; min-width: 0; }
  .vc-tabs button span { font-size: 13px; }
  .vc-tabs button b { font-size: 10px; }
  .vc-tabs button[aria-selected="true"] { background: var(--text); }
  .vc-tabs button[aria-selected="true"] b { color: var(--accent); }
}
.c2 .fx-two { padding: var(--s-4) 0; }
.c2 .fx-two h3 { font-size: clamp(18px, 1.8vw, 22px); }
.c2 .fxr ol.fx-parts li { padding-left: 30px; font: 600 clamp(16px, 1.6vw, 19px)/1.3 var(--f-b); }
.c2 .fx-parts a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.c2 .fx-parts a:hover, .c2 .fx-parts a:focus-visible { text-decoration-thickness: 2.5px; }
/* two-part list: clean rows, ink text, accent only on hover */
.c2 .fx-two .fx-parts { padding: 0; border-left: 0; gap: 0; margin-top: var(--s-2); counter-reset: n; }
.c2 .fx-two .fx-parts li { border-top: 1px solid var(--line); padding: 0; counter-increment: n; font: inherit; }
.c2 .fx-two .fx-parts li:last-child { border-bottom: 1px solid var(--line); }
.c2 .fx-two .fx-parts a { display: flex; align-items: center; gap: 16px; padding: 16px 0; color: var(--text); text-decoration: none; font: 600 clamp(16px, 1.6vw, 19px)/1.35 var(--f-b); transition: color .2s; }
.c2 .fx-two .fx-parts a::before { content: "0" counter(n); flex: none; width: 2.2em; font: 600 13px/1 var(--f-b); letter-spacing: .06em; color: var(--accent); }
.c2 .fx-two .fx-parts a::after { content: "\2192"; margin-left: auto; flex: none; color: var(--accent); transition: transform .25s ease; }
.c2 .fx-two .fx-parts a:hover, .c2 .fx-two .fx-parts a:focus-visible { color: var(--accent); outline: none; }
.c2 .fx-two .fx-parts a:hover::after, .c2 .fx-two .fx-parts a:focus-visible::after { transform: translateX(6px); }
.c2 .fx-next { display: inline-flex; gap: 6px; margin-top: var(--s-4); font: 600 14px/1.3 var(--f-b); color: var(--text); text-decoration: none; opacity: .7; transition: opacity .2s; }
.c2 .fx-next:hover { opacity: 1; color: var(--accent); }
/* two-part list on the cream card: explicit ink and accent, text wraps on phones */
.c2 .fx-two { color: #1c1712; }
.c2 .fx-two h3 { color: #1c1712; }
.c2 .fx-two .fx-parts a { color: #1c1712; flex: 1 1 auto; min-width: 0; padding-right: 4px; overflow-wrap: anywhere; }
.c2 .fx-two .fx-parts a::before, .c2 .fx-two .fx-parts a::after { color: #b4532a; }
.c2 .fx-two .fx-parts a:hover, .c2 .fx-two .fx-parts a:focus-visible { color: #b4532a; }
.c2 .fx-two .fx-parts li { border-color: rgba(28, 23, 18, .18); }
.c2 .fx-two .fx-parts li:last-child { border-color: rgba(28, 23, 18, .18); }
@media (max-width: 700px) { .c2 .fx-two .fx-parts a { gap: 10px; padding: 14px 0; } .c2 .fx-two .fx-parts a::before { width: 1.9em; } }
/* two-part list: aligned grid, card inset, obvious links */
.c2 .fx-two { padding: var(--s-6) var(--s-5); }
.c2 .fx-two .fx-parts { margin: var(--s-4) 0 0; padding: 0; }
.c2 .fxr ol.fx-parts li { padding: 0; }
.c2 .fx-two .fx-parts a { display: grid; grid-template-columns: 3.2ch 1fr auto; align-items: center; column-gap: 12px; padding: 18px 14px; margin: 0 -14px; border-radius: 10px; color: #1c1712; text-decoration: none; font: 600 clamp(16px, 1.6vw, 19px)/1.35 var(--f-b); cursor: pointer; transition: background .2s ease, color .2s ease; }
.c2 .fx-two .fx-parts a::before { content: "0" counter(n); width: auto; font: 700 13px/1 var(--f-b); letter-spacing: .04em; color: #b4532a; }
.c2 .fx-two .fx-parts a::after { content: "\2192"; margin: 0; font-size: 18px; color: #b4532a; transition: transform .25s ease; }
.c2 .fx-two .fx-parts a:hover, .c2 .fx-two .fx-parts a:focus-visible { background: rgba(180, 83, 42, .09); color: #1c1712; outline: none; }
.c2 .fx-two .fx-parts a:hover::after, .c2 .fx-two .fx-parts a:focus-visible::after { transform: translateX(4px); }
.c2 .fx-two .fx-parts a:focus-visible { box-shadow: 0 0 0 2px #b4532a; }
.c2 .fx-two .fx-parts li { border-top: 1px solid rgba(28, 23, 18, .14); }
.c2 .fx-two .fx-parts li:last-child { border-bottom: 1px solid rgba(28, 23, 18, .14); }
@media (max-width: 700px) { .c2 .fx-two { padding: var(--s-5) var(--s-4); } .c2 .fx-two .fx-parts a { grid-template-columns: 2.6ch 1fr auto; padding: 16px 10px; margin: 0 -10px; } }
/* facts: the two lists, tighter and denser */
.c2 .fxs > .fxr:not(.fx-two) { padding: var(--s-3) 0; gap: var(--s-4); }
.c2 .fxs > .fxr:not(.fx-two) h3 { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.25; }
.c2 .fxs > .fxr:not(.fx-two) ul { gap: 6px; padding-left: var(--s-4); }
.c2 .fxs > .fxr:not(.fx-two) li { font-size: clamp(14px, 1.2vw, 15px); line-height: 1.35; padding-left: 18px; }
@media (max-width: 900px) { .c2 .fxs > .fxr:not(.fx-two) { gap: var(--s-2); padding: var(--s-3) 0; } .c2 .fxs > .fxr:not(.fx-two) ul { padding-left: 0; } }
/* facts boxes: real inner padding, text wraps inside the box */
.c2 .fxs > .fxr:not(.fx-two) { padding: var(--s-5) var(--s-5); margin-bottom: var(--s-4); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.c2 .fxs > .fxr:not(.fx-two) li, .c2 .fxs > .fxr:not(.fx-two) h3 { overflow-wrap: anywhere; }
.c2 .fxs > .fxr:not(.fx-two) ul { border-left: 1px solid var(--line); }
@media (max-width: 900px) { .c2 .fxs > .fxr:not(.fx-two) { padding: var(--s-4); grid-template-columns: 1fr; } .c2 .fxs > .fxr:not(.fx-two) ul { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--s-3); } }
/* two-part rows: "Part 1" / "Part 2" already carry the number, so no extra 01/02 label */
.c2 .fx-two .fx-parts a { grid-template-columns: 1fr auto; }
.c2 .fx-two .fx-parts a::before { content: none; display: none; }
@media (max-width: 700px) { .c2 .fx-two .fx-parts a { grid-template-columns: 1fr auto; } }
/* contact banner stays pinned to the bottom of every case study while reading */
.c1 .c1-banner { position: sticky; bottom: 0; z-index: 6; background: var(--paper, var(--surface)); box-shadow: 0 -10px 24px -14px rgba(0, 0, 0, .35); }
.c2 .c1-banner { background: var(--paper, var(--surface)); }
/* product website link: clean pill with a visible arrow, fills on hover */
.c2 .c1-site { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-5); padding: 10px 18px; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: 999px; font: 600 14px/1 var(--f-b); letter-spacing: .01em; color: var(--text); text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.c2 .c1-site span { color: var(--accent); transition: transform .25s ease; }
.c2 .c1-site:hover { opacity: 1; background: var(--text); color: var(--bg); border-color: var(--text); }
.c2 .c1-site:hover span { color: inherit; transform: translate(2px, -2px); }
.c2 .c1-site:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.c2 .c1-hl .c1-site { margin-top: 0; }
/* contact banner: floating pill that stays on screen while reading, subtle shadow */
.c1 .c1-banner { position: fixed; right: 20px; bottom: 20px; left: auto; z-index: 30; width: max-content; max-width: calc(100vw - 40px); margin: 0; padding: 8px 8px 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper, var(--surface)); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .28); }
.c1 .c1-banner p { font-size: 13px; }
.c1 .c1-banner button { padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
@media (max-width: 900px) { .c1 .c1-banner { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; justify-content: space-between; padding: 6px 6px 6px 14px; } .c1 .c1-banner p { font-size: 12px; line-height: 1.3; } }
/* two-part card: light theme uses the same surface as the cards above it */
html:not([data-theme="night"]) .c2 .fx-two { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: #1c1712; }
html:not([data-theme="night"]) .c2 .fx-two h3 { color: #1c1712; }
/* phone: the contact banner is just the floating "Say hello" button */
@media (max-width: 900px) { .c1 .c1-banner { left: auto; right: 12px; bottom: 12px; width: max-content; max-width: none; padding: 4px; background: transparent; border: 0; box-shadow: none; } .c1 .c1-banner p { display: none; } .c1 .c1-banner button { padding: 10px 16px; background: var(--paper, var(--surface)); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .3); } }
/* two-part card: the nth-child dark rule made it dark on light theme; light theme now uses the cream surface, night keeps the dark card */
html:not([data-theme="night"]) .c2 .fxs > .fxr.fx-two { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: #1c1712; }
html:not([data-theme="night"]) .c2 .fxs > .fxr.fx-two h3, html:not([data-theme="night"]) .c2 .fxs > .fxr.fx-two .fx-parts a { color: #1c1712; }
html[data-theme="night"] .c2 .fxs > .fxr.fx-two .fx-parts a, html[data-theme="night"] .c2 .fxs > .fxr.fx-two h3 { color: var(--bg); }
html[data-theme="night"] .c2 .fxs > .fxr.fx-two .fx-parts a:hover { color: var(--accent); }

/* App fix: heading on the left, screenshot on the right (desktop) */
@media (min-width: 900px) {
  .c1 .c1-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: var(--s-7); align-items: start; }
  .c1 .c1-split > .c1-n { grid-column: 1 / -1; grid-row: 1; }
  .c1 .c1-split > h2 { grid-column: 1; grid-row: 2; }
  .c1 .c1-split > .c1-for { grid-column: 1; grid-row: 3; }
  .c1 .c1-split > .sk-fig { grid-column: 2; grid-row: 2 / span 2; margin: 0; }
}

/* app banner: small, subtle, sits above the problem statement */
.c1 .c1-app { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 var(--s-6); padding: 10px 16px 10px 14px; background: #FFF6B8; color: #2b2520; border-radius: 4px; box-shadow: 0 8px 18px -12px rgba(0,0,0,.35); transform: rotate(-.6deg); max-width: 100%; box-sizing: border-box; }
.c1 .c1-app-tag { font: 700 11px/1 var(--f-b); letter-spacing: .12em; text-transform: uppercase; background: #2b2520; color: #FFF6B8; padding: 5px 7px; border-radius: 3px; }
.c1 .c1-app img { width: 88px; height: auto; flex: none; }
.c1 .c1-app p { margin: 0; font-size: 14px; line-height: 1.4; color: #2b2520; }
.c1 .c1-app b { font-weight: 600; }
@media (min-width: 900px) {
  .c1 #problem > .c1-app { grid-column: 1 / -1; grid-row: 2; }
  .c1 #problem > h2 { grid-row: 3; }
  .c1 #problem > h2 + .c1-lede { grid-row: 3; }
}

/* case study hero: consistent space between the title and the product link */
.c2 .c1-hero .c1-hl .c1-h1 { padding-bottom: 0; margin-bottom: var(--s-6); }
.c2 .c1-hl .c1-site { margin-top: 0; }

/* App fix heading: a smaller, quieter title */
.c1 #appfix > h2 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; }

/* paragraph under the App fix screenshot */
.c1 .c1-after { margin: var(--s-6) 0 0; max-width: 62ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--text); }
@media (min-width: 900px) { .c1 .c1-split > .c1-after { grid-column: 1; grid-row: 3; align-self: start; margin-top: var(--s-5); } }

/* sign-up flow: interactive before / after */
.c1 .su { margin-top: var(--s-7); }
.c1 .su-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: var(--s-5); }
.c1 .su-stat { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--text); opacity: .8; }
.c1 .su-stat b { font-size: 34px; line-height: 1; letter-spacing: -.03em; font-weight: 700; }
.c1 .su-stat i { font-style: normal; font-size: 22px; color: var(--accent); }
.c1 .su-tabs { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.c1 .su-tabs button { all: unset; cursor: pointer; padding: 9px 16px; border-radius: 999px; font: 600 14px var(--f-b); color: var(--text); opacity: .7; min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
.c1 .su-tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); opacity: 1; }
.c1 .su-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c1 .su-view[hidden] { display: none; }
.c1 .su-img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; animation: suIn 420ms ease both; }
@keyframes suIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.c1 .su-steps { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; counter-reset: su; }
.c1 .su-steps li { counter-increment: su; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); display: grid; gap: 4px; }
.c1 .su-steps li::before { content: counter(su); font: 700 12px var(--f-b); color: var(--accent); }
.c1 .su-steps b { font-weight: 600; font-size: 15px; }
.c1 .su-steps span { font-size: 13px; opacity: .75; }
.c1 .su-stage { position: relative; }
.c1 .su-pin { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bg); padding: 0; cursor: pointer; background: var(--accent); color: #fff; font: 700 13px/1 var(--f-b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); transition: transform .2s ease; }
.c1 .su-pin[aria-pressed="true"] { transform: translate(-50%, -50%) scale(1.25); background: var(--text); }
.c1 .su-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c1 .su-note { margin: var(--s-5) 0 0; padding: 16px 18px; border-left: 2px solid var(--accent); background: var(--surface); border-radius: 0 10px 10px 0; min-height: 88px; }
.c1 .su-note .su-n { margin: 0 0 6px; font: 600 15px var(--f-b); color: var(--text); }
.c1 .su-note .su-t { margin: 0; font-size: 15px; line-height: 1.5; opacity: .85; }
.c1 .su-land { margin: var(--s-6) 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 360px; }
.c1 .su-land img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.c1 .su-land figcaption { font-size: 13px; opacity: .8; }
.c1 .su-land figcaption b { display: block; font-weight: 600; opacity: 1; }
@media (min-width: 900px) { .c1 .su-note { max-width: 640px; } }

/* GTM story: problem-led beats with a sticky clay exporter */
.c1 #launch { display: block; }
.c1 .st-tldr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: var(--s-6) 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.c1 .st-tldr > div { padding: var(--s-4) var(--s-4) var(--s-4) 0; }
.c1 .st-tldr dt { font: 600 12px var(--f-b); letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin: 0 0 6px; }
.c1 .st-tldr dd { margin: 0; font-size: 15px; line-height: 1.45; }
.c1 .st { display: block; margin-top: var(--s-8); }
.c1 .beat { padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.c1 .beat:first-child { border-top: 0; padding-top: 0; }
.c1 .beat-k { font: 600 12px var(--f-b); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.c1 .beat h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 12px; font-weight: 650; }
.c1 .beat > p:not(.beat-k):not(.say) { margin: 0; font-size: 16px; line-height: 1.6; max-width: 56ch; opacity: .9; }
.c1 .beat .say { display: none; }
.c1 .st-flow { display: grid; gap: 8px; margin-top: var(--s-5); }
.c1 .st-flow span { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; font-weight: 600; }
.c1 .st-flow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c1 .st-flow-4 span { opacity: .75; }
.c1 .st-flow-1 { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.c1 .st-flow-1 span { background: var(--accent); color: #fff; border-color: transparent; text-align: center; font-size: 14px; padding: 14px; }
.c1 .st-aside { display: none; }
@media (min-width: 901px) {
  .c1 .st { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 72px; align-items: start; }
  .c1 .st { grid-template-columns: minmax(0, .7fr) minmax(0, 1.2fr); }
  .c1 .st-aside { display: block; order: -1; position: sticky; bottom: 32px; align-self: end; }
  .c1 .beat .say { display: none; }
  .c1 .beat:first-child { padding-top: 0; }
}
@media (max-width: 900px) {
  .c1 .beat .say { display: block; margin: var(--s-5) 0 0; padding: 12px 14px; border-left: 2px solid var(--accent); font-size: 15px; font-style: italic; }
  .c1 .st-tldr { grid-template-columns: 1fr 1fr; }
  .c1 .st-flow-4 { grid-template-columns: 1fr 1fr; }
}
.c1 .st-mascot { position: relative; display: grid; justify-items: start; gap: 8px; }
.c1 .st-char { width: min(220px, 60%); }
.c1 .st-char img { display: block; width: 100%; height: auto; }
.c1 .st-mascot .cl-clip { transition: transform .5s ease; transform-box: fill-box; transform-origin: 50% 50%; }
.c1 .st-mascot[data-pose="1"] .cl-clip { transform: rotate(-10deg) translateY(-8px); }
.c1 .st-mascot[data-pose="2"] .cl-clip { transform: rotate(6deg); }
.c1 .st-mascot[data-pose="3"] .cl-clip { transform: rotate(-4deg) translateX(-6px); }
.c1 .st-mascot[data-pose="4"] .cl-clip { transform: translateY(-10px) rotate(12deg); }
.c1 .st-mascot[data-pose="5"] .cl-clip { transform: rotate(-14deg) translateX(10px); }
.c1 .st-mascot[data-pose="6"] .cl-clip { transform: translateY(-14px); }
.c1 .st-say { position: relative; margin-left: 4px; background: #fff; color: #2b2520; border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 26px -12px rgba(0,0,0,.35); width: 100%; box-sizing: border-box; }
.c1 .st-say::after { content: ''; position: absolute; left: 28px; bottom: -8px; width: 16px; height: 16px; background: #fff; transform: rotate(45deg); }
.c1 .st-say p { margin: 0; font-size: 15px; line-height: 1.45; transition: opacity .25s ease; }
html[data-theme="night"] .c1 .st-say { background: #2b2520; color: #f4ece0; }
html[data-theme="night"] .c1 .st-say::after { background: #2b2520; }
.c1 .st-name { margin: 0; font: 600 12px var(--f-b); letter-spacing: .1em; text-transform: uppercase; opacity: .6; }

/* CBAM hero title: lighter weight */
.c2 .c1-hero .c1-h1 { font-weight: 500; }

/* listening section: question boxes above and around the exporter, who sits centre bottom */
.c1 #voice { display: block; }
.c1 #voice + * { border-top: 0; }
.c1 #voice > h2, .c1 #voice > .c1-lede { grid-column: 1 / -1; margin-left: 0; padding-left: 0; border-left: 0; align-self: auto; }
.c1 #voice, .c1 #voice > * { border-left: 0 !important; }
.c1 #voice > h2 { margin-bottom: var(--s-4); }
.c1 #voice > .c1-lede { max-width: 60ch; margin-top: 0; }
.c1 .vq-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px) minmax(0, 1fr); grid-template-areas: "q1 man q3" "q2 man q4"; gap: 14px 18px; align-items: stretch; margin-top: var(--s-7); }
.c1 .vq-q { position: relative; margin: 0; padding: 26px 22px 22px; border: 0; border-radius: 3px; background: #FFE97A; color: #2a2a2a; box-shadow: 0 14px 22px -12px rgba(70,50,0,.45); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.c1 .vq-q:hover, .c1 .vq-q:focus-visible { transform: rotate(0deg) scale(1.03) !important; box-shadow: 0 18px 28px -12px rgba(70,50,0,.5); outline: none; }
.c1 .vq-q { height: 100%; box-sizing: border-box; }
.c1 .vq-txt span { display: block; font: 700 11px/1 var(--f-b); letter-spacing: .12em; color: #8a3b12; margin-bottom: 8px; }
.c1 .vq-txt p { margin: 0; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.35; font-weight: 500; }
.c1 .vq-q1 { grid-area: q1; } .c1 .vq-q2 { grid-area: q2; } .c1 .vq-q3 { grid-area: q3; } .c1 .vq-q4 { grid-area: q4; }
.c1 .vq-man { grid-area: man; position: relative; align-self: center; justify-self: center; width: 100%; max-width: 260px; text-align: center; }
.c1 .vq-head { position: relative; }
.c1 .vq-face { display: block; width: 100%; height: auto; }
.c1 .vq-eye { will-change: transform; }
.c1 .vq-face { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .c1 .vq-pupil { position: absolute; display: block; pointer-events: none; will-change: transform; } }
.c1 .vq-hint { margin: 6px 0 0; font: 600 11px var(--f-b); letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
@media (max-width: 900px), (pointer: coarse) {
  .c1 .vq-stage { grid-template-columns: 1fr 1fr; grid-template-areas: "q1 q3" "q2 q4" "man man"; gap: 12px; }
  .c1 .vq-man { max-width: 170px; margin: 8px auto 0; }
  .c1 .vq-q { padding: 14px 14px; }
  .c1 .vq-txt p { font-size: 13px; }
}

/* 06 solutions: mascot sticks beside the four answers */
.c1 #solutions { display: block; }
.c1 #solutions, .c1 #solutions > * { border-left: 0 !important; }
.c1 #solutions > h2 { margin-bottom: var(--s-4); }
.c1 #solutions > .c1-lede { max-width: 60ch; margin: 0; padding: 0; }
.c1 #solutions > h2 + .c1-lede + * { margin-top: var(--s-7); }
.c1 .sol-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--s-7); align-items: start; margin-top: var(--s-7); }
.c1 .sol-man { position: sticky; top: 96px; text-align: center; }
.c1 .sol-man .vq-face { width: 100%; height: auto; display: block; overflow: visible; }
.c1 .sol-man .vq-eye { will-change: transform; }
.c1 .sol-parts { display: grid; gap: var(--s-6); }
.c1 .sol-part { padding: var(--s-5) 0 var(--s-6); border-top: 1px solid var(--line); cursor: default; }
.c1 .sol-part:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.c1 .sol-part h3 { font: 600 clamp(20px, 2vw, 26px)/1.2 var(--f-b); letter-spacing: -.02em; margin: 6px 0 10px; }
.c1 .sol-part p { margin: 0 0 var(--s-4); font-size: 16px; line-height: 1.6; color: var(--text-2); }
.c1 .sol-n { font: 700 11px/1 var(--f-b); letter-spacing: .12em; color: var(--accent); }
.c1 .sol-ph { margin-top: 12px; border: 1px dashed var(--line); border-radius: 10px; padding: 28px 16px; text-align: center; font-size: 13px; color: var(--text-3, var(--text-2)); }
@media (max-width: 900px) { .c1 .sol-grid { grid-template-columns: 1fr; gap: var(--s-6); } .c1 .sol-man { position: relative; top: 0; max-width: 200px; margin: 0 auto; } }

.c1 .sol-q { display: block; margin: 8px 0 0; font: 500 14px/1.4 var(--f-b); color: var(--text-2); font-style: italic; }

/* dark mode: the mascot ink follows the text colour, and the yellow notes keep dark text */
.c1 .vq-face, .c1 .sol-man .vq-face { color: var(--text); }
.c1 .vq-q, .c1 .vq-q .vq-txt p, .c1 .vq-q .vq-txt span { color: #2a2a2a; }
.c1 .vq-q .vq-txt span { color: #8a3b12; }

/* mobile: the mascot rides over the section boundary while he glides, and his moves are smoothed */
@media (max-width: 900px) {
  .c1 #solutions .sol-man { position: relative; z-index: 3; transition: transform .12s ease-out; will-change: transform; }
  .c1 #voice .vq-man { position: relative; z-index: 3; }
}

/* phone layout for the listening and solutions sections: notes in two columns, mascot centred below them */
@media (max-width: 900px), (pointer: coarse) {
  .c1 #voice, .c1 #solutions { padding-inline: 20px; box-sizing: border-box; max-width: 100%; overflow-x: clip; }
  .c1 .vq-stage { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: "q1 q3" "q2 q4" "man man" !important; gap: 12px !important; width: 100%; }
  .c1 .vq-q { transform: none !important; padding: 14px !important; height: auto !important; min-width: 0; }
  .c1 .vq-q:hover, .c1 .vq-q:focus-visible { transform: none !important; }
  .c1 .vq-txt p { font-size: 14px !important; line-height: 1.35; overflow-wrap: anywhere; }
  .c1 .vq-txt span { margin-bottom: 6px; }
  .c1 .vq-man, .c1 .sol-man { width: 100%; max-width: 190px !important; margin: 4px auto 0 !important; grid-area: man; justify-self: center; }
  .c1 .vq-man .vq-face, .c1 .sol-man .vq-face { width: 100% !important; height: auto !important; }
  .c1 .vq-hint { text-align: center; }
  .c1 .sol-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .c1 .sol-parts { gap: 20px; }
  .c1 .sol-ph { padding: 18px 12px; }
}

/* phone: scroll-driven listening. One question card and the mascot stay pinned while the section scrolls,
   and each scroll step swaps in the next question and its expression. */
@media (max-width: 900px), (pointer: coarse) {
  .c1 #voice { min-height: 300vh; }
  .c1 #voice .vq-stage { position: sticky; top: 72px; height: calc(100vh - 104px); display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "stack" "man" !important; grid-template-rows: 1fr auto; align-content: center; justify-items: center; gap: 12px !important; margin-top: var(--s-6); }
  .c1 #voice .vq-q { grid-area: stack; align-self: center; height: auto !important; min-height: 0; width: 100%; max-width: 340px; opacity: 0; visibility: hidden; transform: translateY(10px) !important; transition: opacity .35s ease, transform .35s ease, visibility .35s; }
  .c1 #voice .vq-q.is-active { opacity: 1; visibility: visible; transform: none !important; }
  .c1 #voice .vq-q .vq-txt p { font-size: 18px !important; }
  .c1 #voice .vq-man { grid-area: man; max-width: 170px !important; margin: 0 auto; }
}

/* section 06 on phone: each part is a readable block with its own mascot expression above it */
.c1 .sol-mini { display: none; }
@media (max-width: 900px), (pointer: coarse) {
  .c1 #solutions .sol-man { display: none; }
  .c1 .sol-grid { display: block !important; margin-top: var(--s-6); }
  .c1 .sol-parts { gap: 0; }
  .c1 .sol-part { padding: var(--s-6) 0; }
  .c1 .sol-mini { display: block; width: 132px; margin: 0 0 14px; color: var(--text); }
  .c1 .sol-mini .sol-mini-face { display: block; width: 100%; height: auto; overflow: visible; }
  .c1 .sol-part h3 { font-size: 24px; line-height: 1.2; }
  .c1 .sol-part p { font-size: 17px; line-height: 1.6; }
  .c1 .sol-q { font-size: 15px; }
  .c1 .sol-ph { font-size: 14px; }
}

/* 06.1 WhatsApp screenshots */
.c1 .sol-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; margin: 0 0 var(--s-4); }
.c1 .sol-shots figure { margin: 0; }
.c1 .sol-shots img { display: block; width: 100%; height: auto; border-radius: 14px; border: 0.5px solid var(--line); }
.c1 .sol-shots figcaption { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
@media (max-width: 900px), (pointer: coarse) {
  .c1 .sol-shots { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .c1 .sol-shots figure { scroll-snap-align: start; }
}

/* 06.2 sign-up screen */
.c1 .sol-shot-wide { margin: 0 0 var(--s-4); }
.c1 .sol-shot-wide img { display: block; width: 100%; height: auto; border-radius: 14px; border: 0.5px solid var(--line); }
.c1 .sol-shot-wide figcaption { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--text-2); }

/* Container-based stage layout: holds on phones even when the in-app viewer reports a wider viewport */
.c1 #voice { container-type: inline-size; }
@container (max-width: 760px) {
  .c1 .vq-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: "q1 q3" "q2 q4" "man man" !important; gap: 12px !important; width: 100%; }
  .c1 .vq-man { max-width: 170px !important; margin: 8px auto 0 !important; }
  .c1 .vq-q { padding: 14px !important; min-width: 0; overflow-wrap: anywhere; }
}

/* Class-driven phone layout (set by js/case01.js) */
.vq-narrow .c1 .vq-stage { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: "q1 q3" "q2 q4" "man man" !important; gap: 12px !important; width: 100% !important; }
.vq-narrow .c1 .vq-man { max-width: 170px !important; margin: 8px auto 0 !important; }
.vq-narrow .c1 .vq-q { padding: 14px !important; min-width: 0; overflow-wrap: anywhere; }
.vq-narrow .c1 .sol-mini { display: block; }

/* 6.2 screenshots: stacked on desktop, swipeable row on mobile */
.c1 .sol-slider { display: block; }
@media (max-width: 900px), (pointer: coarse) {
  .c1 .sol-slider { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin: 0 0 var(--s-4); }
  .c1 .sol-slider > figure { flex: 0 0 82%; scroll-snap-align: start; margin: 0 !important; }
}
.vq-narrow .c1 .sol-slider { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 0 var(--s-4); }
.vq-narrow .c1 .sol-slider > figure { flex: 0 0 82%; scroll-snap-align: start; margin: 0 !important; }

/* Visual cue for horizontal scroll rows on phones */
.c1 .sol-swipe { display: none; margin: 0 0 8px; font-size: 12px; letter-spacing: .04em; color: var(--text-2); }
@media (max-width: 900px), (pointer: coarse) { .c1 .sol-swipe { display: flex; align-items: center; gap: 6px; } .c1 .sol-swipe span { color: var(--accent, #8a3b12); font-size: 14px; } }
.vq-narrow .c1 .sol-swipe { display: flex; align-items: center; gap: 6px; }

/* Annotated sign-up walkthrough (6.3) */
.c1 .su { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; margin: 0 0 var(--s-5); }
.c1 .su-card.su-shot { max-width: 420px; padding: 0; margin: 0 auto; overflow: hidden; border-radius: 16px; border: 0.5px solid var(--line); }
.c1 .su-shot img { display: block; width: 100%; height: auto; }
.c1 .su-card { max-width: 420px; margin: 0 auto; width: 100%; padding: 22px; border: 0.5px solid var(--line); border-radius: 16px; background: var(--surface, transparent); box-shadow: 0 18px 36px -24px rgba(0,0,0,.35); }
.c1 .su-card h4 { margin: 0 0 6px; text-align: center; font-size: 17px; font-weight: 600; }
.c1 .su-sub { margin: 0 0 14px; font-size: 12px; text-align: center; color: var(--text-2); }
.c1 .su-f { border: 0.5px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.c1 .su-f span { display: block; font-size: 10px; color: var(--text-2); }
.c1 .su-f i { display: block; font-style: normal; font-size: 12px; color: var(--text-2); opacity: .6; }
.c1 .su-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.c1 .su-btn { margin: 10px 0 12px; padding: 10px; border-radius: 8px; background: #2A46B8; color: #fff; text-align: center; font-size: 13px; font-weight: 600; }
.c1 .su-proof, .c1 .su-badges, .c1 .su-sub { border-radius: 10px; transition: box-shadow .4s ease, background .4s ease; padding: 6px; }
.c1 .su-quote b { font-size: 11px; display: block; }
.c1 .su-quote p { margin: 2px 0 0; font-size: 11px; color: var(--text-2); }
.c1 .su-badges { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; }
.c1 .su-iso { width: 40px; height: 40px; border-radius: 50%; border: 1.5px dashed var(--text-2); display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.c1 .su-sub.is-hl, .c1 .su-proof.is-hl, .c1 .su-badges.is-hl { background: #FFE97A; color: #2a2a2a; box-shadow: 0 0 0 4px rgba(255,233,122,.35); animation: suPulse 1.6s ease-in-out infinite; }
.c1 .su-sub.is-hl b { color: #8a3b12; }
@keyframes suPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.c1 .su-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.c1 .su-call { position: relative; padding: 14px 16px 14px 46px; border-radius: 12px; border: 0.5px solid var(--line); opacity: .45; transform: translateX(6px); transition: opacity .45s ease, transform .45s ease, background .45s ease, box-shadow .45s ease; cursor: pointer; }
.c1 .su-call::before { content: ""; position: absolute; left: 16px; top: 18px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #8a3b12; }
.c1 .su-call.is-on { opacity: 1; transform: none; background: #FFE97A; color: #2a2a2a; box-shadow: 0 14px 22px -14px rgba(70,50,0,.45); }
.c1 .su-call.is-on::before { background: #8a3b12; }
.c1 .su-call em { display: block; font-style: normal; font-weight: 600; font-size: 14px; }
.c1 .su-call p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
@media (max-width: 900px), (pointer: coarse) { .c1 .su { grid-template-columns: 1fr; gap: 16px; } .c1 .su-card { max-width: 360px; } }
.vq-narrow .c1 .su { grid-template-columns: 1fr; gap: 16px; }
@media (prefers-reduced-motion: reduce) { .c1 .su-sub.is-hl, .c1 .su-proof.is-hl, .c1 .su-badges.is-hl { animation: none; } .c1 .su-call { transition: none; } }

/* Phone: keep the pinned stage and mascot clear of the floating bottom bar */
@media (max-width: 900px), (pointer: coarse) {
  .c1 #voice .vq-stage { height: calc(100vh - 200px) !important; height: calc(100svh - 200px) !important; padding-bottom: 64px; box-sizing: border-box; }
  .c1 #voice .vq-hint { display: none; }
}

/* Phone: step counter for the pinned questions; hide the floating "Say hello" inside the case study */
@media (max-width: 900px), (pointer: coarse) {
  .c1 #voice .vq-stage::before { content: attr(data-step); position: absolute; top: -4px; right: 0; font: 600 12px var(--f-b); letter-spacing: .08em; color: #8a3b12; }
  .c1 #voice .vq-stage { position: sticky; }
  .c1 .c1-banner { display: none !important; }
}
[hidden] { display: none !important; }
/* Problem section (desktop): heading and lede side by side, the three problem cards below */
@media (min-width: 901px) {
  .c1 #problem { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .c1 #problem > .c1-n { width: 100%; }
  .c1 #problem > h2 { flex: 1 1 50%; margin: 0; padding-right: var(--s-6); }
  .c1 #problem > .c1-lede { flex: 1 1 50%; margin: 0 0 var(--s-7); padding-left: var(--s-6); border-left: 1px solid var(--line); align-self: stretch; }
  .c1 #problem > .c1-3 { width: 100%; margin-top: var(--s-7); }
}
/* before / after sign-up screens (article 6.2) */
.c1 .sol-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; margin: var(--s-4) 0; }
.c1 .sol-steps figure { margin: 0; }
.c1 .sol-steps img { display: block; width: 100%; height: auto; border-radius: 12px; border: 0.5px solid var(--line); background: #fff; }
.c1 .sol-steps figcaption { margin-top: 8px; font: 600 13px/1.4 var(--f-b); color: var(--text-2); }
@media (max-width: 760px) { .c1 .sol-steps { grid-template-columns: 1fr; } }

/* section 06: each question sits in the mascot's thought bubble */
.c1 .sol-man { padding-top: 104px; }
.c1 .sol-thought { position: relative; margin: 0; padding: 12px 16px; border: 1.5px solid var(--text); border-radius: 18px; background: var(--surface); font: 600 15px/1.35 var(--f-b); color: var(--text); text-align: center; }
.c1 .sol-man .sol-thought { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(260px, 100%); }
.c1 .sol-man .sol-thought::before, .c1 .sol-man .sol-thought::after { content: ''; position: absolute; left: 50%; background: var(--surface); border: 1.5px solid var(--text); border-radius: 50%; transform: translateX(-50%); }
.c1 .sol-man .sol-thought::before { width: 12px; height: 12px; bottom: -22px; }
.c1 .sol-man .sol-thought::after { width: 7px; height: 7px; bottom: -36px; }
.c1 .sol-thought.sol-thought-mini { display: none; margin: 0 0 12px; font-size: 14px; }
@media (max-width: 900px), (pointer: coarse) {
  .c1 .sol-thought.sol-thought-mini { display: block; }
}

/* before / after comparison: compact, labelled, scannable */
.c1 .sol-cmp-lab { font: 700 11px/1 var(--f-b); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.c1 .sol-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 var(--s-5); }
.c1 .sol-steps img { height: 210px; width: 100%; object-fit: contain; object-position: top center; border-radius: 10px; }
.c1 .sol-steps figcaption { margin-top: 6px; font-size: 12px; }
.c1 .sol-shot-wide { max-width: 100%; margin: 0 0 var(--s-4); }
@media (max-width: 760px) {
  .c1 .sol-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .c1 .sol-steps img { height: 150px; }
  .c1 .sol-steps figcaption { font-size: 11px; }
  .c1 .sol-shot-wide { max-width: 100%; }
}

/* 6.4 sign-up proof: dark mode */
html[data-theme="night"] .c1 .su-card.su-shot { border-color: rgba(255, 255, 255, .16); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); background: #fff; }
html[data-theme="night"] .c1 .su-call { opacity: .72; border-color: rgba(255, 255, 255, .14); background: color-mix(in srgb, var(--surface) 86%, #000); }
html[data-theme="night"] .c1 .su-call p { color: var(--text-2); }
html[data-theme="night"] .c1 .su-call.is-on { opacity: 1; background: #FFE97A; border-color: #FFE97A; color: #2a2a2a; }
html[data-theme="night"] .c1 .su-call.is-on p { color: #3a3226; }
html[data-theme="night"] .c1 .su-call::before { border-color: #d9a27e; }
html[data-theme="night"] .c1 .su-call.is-on::before { background: #8a3b12; border-color: #8a3b12; }

/* 6.4 sign-up proof: modern app-window mockup around the original screen */
.c1 .su-card.su-shot { background: #f3f1ed; }
.c1 .su-card.su-shot::before { content: ""; display: block; height: 30px; border-bottom: 0.5px solid var(--line); background-color: #f3f1ed; background-image: radial-gradient(circle, #ff5f57 0 4.5px, transparent 5px), radial-gradient(circle, #febc2e 0 4.5px, transparent 5px), radial-gradient(circle, #28c840 0 4.5px, transparent 5px); background-size: 9px 9px, 9px 9px, 9px 9px; background-position: 12px 50%, 26px 50%, 40px 50%; background-repeat: no-repeat; }
.c1 .su-card.su-shot img { display: block; width: calc(100% - 28px); height: auto; margin: 14px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
html[data-theme="night"] .c1 .su-card.su-shot { background: #2a2622; }
html[data-theme="night"] .c1 .su-card.su-shot::before { background-color: #2a2622; }

/* section 06 thought bubble: a real thought cloud (SVG outline behind the text) */
.c1 .sol-thought { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 120' preserveAspectRatio='none'%3E%3Cpath d='M40 100C10 100 10 70 30 66C20 40 50 28 70 38C80 12 130 8 140 34C160 14 210 18 212 46C240 40 252 70 232 84C250 96 236 116 212 108C200 118 160 118 150 108C130 120 80 118 70 108C50 116 30 106 40 100Z' fill='%23fffdf8' stroke='%23171615' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; border: 0; border-radius: 0; box-shadow: none; padding: 30px 34px 28px; }
.c1 .sol-man .sol-thought::before, .c1 .sol-man .sol-thought::after { border-color: #171615; background: #fffdf8; }
html[data-theme="night"] .c1 .sol-thought { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 120' preserveAspectRatio='none'%3E%3Cpath d='M40 100C10 100 10 70 30 66C20 40 50 28 70 38C80 12 130 8 140 34C160 14 210 18 212 46C240 40 252 70 232 84C250 96 236 116 212 108C200 118 160 118 150 108C130 120 80 118 70 108C50 116 30 106 40 100Z' fill='%232a2622' stroke='%23d9cfc0' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); color: var(--text); }
html[data-theme="night"] .c1 .sol-man .sol-thought::before, html[data-theme="night"] .c1 .sol-man .sol-thought::after { border-color: #d9cfc0; background: #2a2622; }


/* section 06 question bubble: rectangular box so the text always fits */
.c1 .sol-thought { background: #fffdf8; border: 1.5px solid #171615; border-radius: 16px; box-shadow: none; aspect-ratio: auto; padding: 16px 20px; color: #171615; }
.c1 .sol-man .sol-thought { width: min(262px, 100%); }
.c1 .sol-thought::before, .c1 .sol-thought::after { display: none; }
html[data-theme="night"] .c1 .sol-thought { background: #2a2622; border-color: #d9cfc0; color: #f3ece1; }

/* section 6.4 notes: soft upward text reveal, one line after another */
.c1 .su-notes > li { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 140ms); }
.c1 .su-notes.is-in > li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .c1 .su-notes > li { opacity: 1; transform: none; transition: none; } }

/* say hello banner: top right of the hero and at the end of the case study */
.c1-hero { position: relative; }
.hello-banner { position: absolute; top: 18px; right: var(--s-4); z-index: 3; }
.hello-end .hello-banner { position: static; text-align: right; margin: 0 0 28px; }
.hello-tip { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 14px/1 var(--f-b); cursor: pointer; }
.hello-tip:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.hello-tip .hi-bubble { left: auto; right: 0; transform: translate(0, 4px); }
.hello-tip .hi-bubble.on { transform: translate(0, 0); }
@media (max-width: 760px) { .hello-banner { top: 10px; right: var(--s-3); } }

/* say hello CTA inside the end-of-case-study footer */
.c1-end .hello-cta { margin-top: 24px; }

/* live marker: small green dot beside a number */
.c1 .live-tag { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f-b); letter-spacing: .04em; color: var(--text-2); margin-left: 10px; }
.c1 .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2FA36B; box-shadow: 0 0 0 3px rgba(47,163,107,.18); display: inline-block; }
.c1 .live-num { display: inline-flex; align-items: center; white-space: nowrap; }
.c1 .live-label { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f-b); letter-spacing: .04em; color: var(--text-2); margin-top: var(--s-2); }

/* check proof: notebook-style overlay (reuses .win) that slides up from the bottom */
.c1 .proof-cta-row { margin: var(--s-4) 0 0; }
.c1 .proof-img { display: block; width: 100%; max-height: min(460px, 52vh); object-fit: contain; border-radius: 10px; border: .5px solid var(--line); }