/* DogEgg brand services — light Apple-style system: grey-white page, white chapter panels, amber accent, liquid glass */
:root{
  --bg:#F3F5F7;--panel:#FFFFFF;--tile:#F5F5F7;
  --ink:#1D1D1F;--ink2:#5E5D63;--ink3:#8A898F;--line:#D2D2D7;--line2:#E8E8ED;
  --a1:#FF7A2F;--a-deep:#B8430F;--a-soft:#FFF3EA;--a-line:#FFD7BE;
  --grad:linear-gradient(90deg,#D9480F 0%,#FF7A2F 52%,#FF9B55 100%);
  --sans:"Inter","Noto Sans SC",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --mark:"Montserrat","Inter",sans-serif;
  --gl:max(12px,env(safe-area-inset-left,0px));--gr:max(12px,env(safe-area-inset-right,0px));
  --pad:clamp(20px,6vw,88px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-print-color-adjust:exact;print-color-adjust:exact;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;padding:0 var(--gr) calc(20px + env(safe-area-inset-bottom,0px)) var(--gl)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.mb{mix-blend-mode:multiply}

/* ---------- document top bar ---------- */
.top{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;padding:16px clamp(4px,1.5vw,12px) 14px}
.top .id{display:flex;align-items:center;gap:12px;min-width:0}
.wm{font-family:var(--mark);font-weight:900;font-style:italic;letter-spacing:-.01em;line-height:1}
.top .wm{font-size:17px}
.top .doc{font-size:13.5px;color:var(--ink2);padding-left:12px;border-left:1px solid var(--line)}
.tabs{display:flex;gap:2px;padding:4px;border-radius:999px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink2);white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a.on{background:var(--ink);color:#fff}
@media(max-width:759px){.top{padding-top:12px}.tabs{width:100%}}

/* ---------- chapter panels ---------- */
.band{position:relative;max-width:1200px;margin:0 auto 14px;background:var(--panel);border-radius:clamp(26px,3vw,36px);padding:clamp(52px,7vw,104px) var(--pad);overflow:hidden;isolation:isolate}
.band.soft{background:radial-gradient(900px 520px at 88% -10%,rgba(255,168,110,.20),transparent 62%),radial-gradient(700px 520px at -5% 105%,rgba(255,196,150,.16),transparent 60%),#FFFFFF}
.wrap{max-width:1000px;margin:0 auto;position:relative}
.orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(40px);background:radial-gradient(closest-side,rgba(255,138,70,.42),rgba(255,138,70,0))}

/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:15px;font-weight:600;color:var(--a-deep);line-height:1.3}
.eyebrow b{font-family:"Inter",sans-serif;font-size:12px;font-weight:600;color:#fff;background:var(--ink);border-radius:999px;padding:3px 9px;letter-spacing:.02em}
.eyebrow i{font-style:normal;font-family:"Inter",sans-serif;font-size:13px;font-weight:500;color:var(--ink3)}
h1,h2,h3,h4{font-weight:600;color:var(--ink);line-break:strict}
h1{font-size:clamp(40px,6.4vw,76px);line-height:1.12;letter-spacing:-.025em}
h2{font-size:clamp(30px,4.6vw,52px);line-height:1.18;letter-spacing:-.02em;margin-top:16px}
h3{font-size:21px;line-height:1.3;letter-spacing:-.01em}
.lede{font-size:clamp(17px,1.8vw,20px);line-height:1.6;color:var(--ink2);margin-top:16px;max-width:36em}
.lede b{color:var(--ink);font-weight:600}
.hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.en{font-family:"Inter",sans-serif;font-weight:500;color:var(--ink3);letter-spacing:-.005em}
.sm-br{display:inline}
@media(min-width:760px){.sm-br{display:none}}
.head{max-width:860px}
.head + *{margin-top:clamp(32px,4.5vw,56px)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--tile);color:var(--ink2);font-size:13.5px;font-weight:500;line-height:1.35}
.tile .chip{background:#fff}
.chip.a,.tile .chip.a{background:var(--a-soft);color:var(--a-deep)}
.chip.o,.tile .chip.o{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink3)}
.chip.dk,.tile .chip.dk{background:var(--ink);color:#fff}
.plus{color:var(--ink3);font-weight:500;padding:0 2px}

/* ---------- tiles ---------- */
.tile{position:relative;background:var(--tile);border-radius:24px;padding:clamp(22px,2.4vw,30px);overflow:hidden}
.tile.ghost{background:transparent;border:1.5px dashed var(--line)}
.tile.ghost .chip:not(.a):not(.o){background:var(--tile)}
.tile.warm{background:linear-gradient(160deg,#FFEEE2 0%,#FFF7F1 55%,#FFFFFF 100%)}
.tile h3 .en{font-size:13px;font-weight:500;margin-left:8px;letter-spacing:0}
.tile p{font-size:15.5px;color:var(--ink2);line-height:1.6}

.ico{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;background:linear-gradient(180deg,#3A3A3C,#1D1D1F);color:#FF9A57;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -8px rgba(0,0,0,.45)}
.ico svg{width:23px;height:23px}
.ico.off{background:#E8E8ED;color:#8E8E93;box-shadow:none}

/* ---------- liquid glass (light) ---------- */
.glass{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.48));-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px rgba(255,255,255,.5),0 0 0 1px rgba(60,40,20,.07),0 14px 34px -14px rgba(70,40,15,.3)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(140deg,#fff,rgba(255,255,255,.55) 30%,rgba(255,255,255,.2) 60%,rgba(255,255,255,.95));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tabs.glass{background:rgba(255,255,255,.7);box-shadow:inset 0 1px 1px #fff,0 4px 16px -8px rgba(0,0,0,.12)}

/* ---------- cover ---------- */
.cover{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(40px,5vw,72px)}
.cv{display:grid;gap:8px;align-items:center}
.cv h1{margin-top:20px}
.cv .en.big{display:block;font-size:clamp(19px,2.2vw,26px);margin-top:16px;color:var(--ink2)}
.cv .lead{margin-top:18px;font-size:clamp(16px,1.6vw,18px);color:var(--ink2);max-width:30em}
.cv .lead b{color:var(--ink);font-weight:600}
.cv-vis{position:relative;margin:0 calc(-1*var(--pad))}
.cv-vis img{width:100%}
.cv-vis .orb{width:70%;aspect-ratio:1.6;left:15%;top:30%}
@media(min-width:900px){
  .cv{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px}
  .cv-vis{margin:0 calc(-1*var(--pad)) 0 -4%}
}
/* segmented control */
.seg{display:inline-flex;align-items:stretch;gap:2px;padding:4px;border-radius:999px;margin-top:28px;max-width:100%}
.seg span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:54px;flex:1 1 0;padding:8px 8px 7px;border-radius:999px;line-height:1.15}
.seg b{font-size:15px;font-weight:600;color:var(--ink)}
.seg i{font-style:normal;font-family:"Inter",sans-serif;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.seg .on{background:linear-gradient(180deg,#FF9147,#FF6A1F);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px -6px rgba(255,106,31,.75)}
.seg .on b{color:#fff}.seg .on i{color:rgba(255,255,255,.85)}
@media(min-width:760px){.seg span{min-width:84px;padding:9px 14px 8px}.seg b{font-size:17px}.seg i{font-size:9.5px}}
/* contents */
.toc{margin-top:clamp(28px,4vw,48px);padding-top:22px;border-top:1px solid var(--line2)}
.toc .t{font-size:13px;font-weight:600;color:var(--ink3);letter-spacing:.04em}
.toc ol{list-style:none;margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.toc a{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2);font-size:15px;font-weight:500;color:var(--ink)}
.toc a span{font-family:"Inter",sans-serif;font-size:12.5px;font-weight:600;color:var(--a-deep);width:20px;flex:none}
.toc a:hover{color:var(--a-deep)}
@media(min-width:900px){.toc ol{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}}

/* ---------- 01 journey ---------- */
.jr{position:relative;display:grid;gap:12px}
.jr::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;border-radius:2px;background:linear-gradient(180deg,#FFE2CF,#FF7A2F)}
.js{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.dot{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:"Inter",sans-serif;font-weight:600;font-size:16px;color:#8A3A0C;background:#FFF0E5;box-shadow:0 0 0 6px var(--panel)}
.js:nth-child(2) .dot{background:#FFDFC8}.js:nth-child(3) .dot{background:#FFC9A3}.js:nth-child(4) .dot{background:#FFAE78;color:#6A2A05}
.js:last-child .dot{background:linear-gradient(180deg,#FF9147,#FF6A1F);color:#fff;box-shadow:0 0 0 6px var(--panel),0 8px 20px -6px rgba(255,106,31,.8)}
.js .tile{padding:20px;border-radius:22px}
.js h3{font-size:23px}
.js h3 .en{font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-left:8px}
.js p{margin-top:4px;font-size:15px}
.js .chips{margin-top:12px}
.after{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:22px;font-size:14.5px;color:var(--ink2)}
.after .loop{display:flex;align-items:center;gap:8px}
.after svg{width:18px;height:18px;color:var(--a1);flex:none}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;color:var(--ink3)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:12px;height:12px;border-radius:4px;background:var(--a-soft);box-shadow:inset 0 0 0 1px var(--a-line)}
.legend i.t{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
@media(min-width:1024px){
  .jr{grid-template-columns:repeat(5,minmax(0,1fr))}
  .jr::before{left:10%;right:10%;top:21px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,#FFE2CF,#FF7A2F)}
  .js{grid-template-columns:1fr;grid-template-rows:auto 1fr;justify-items:center;gap:16px}
  .js .tile{width:100%;height:100%}
}

/* ---------- 02 service map ---------- */
.bento{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.svc{display:flex;flex-direction:column}
.svc .top2{display:flex;align-items:center;justify-content:space-between;gap:12px}
.role{font-size:12.5px;font-weight:600;color:var(--ink3);letter-spacing:.02em;text-align:right}
.svc h3{margin-top:18px;font-size:23px}
.svc .en.sub{display:block;font-size:13px;margin-top:2px}
.solve{margin-top:16px;padding-top:16px;border-top:1px solid #E3E3E8;font-size:19px;font-weight:600;line-height:1.4;color:var(--ink)}
.solve small{display:block;font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:.06em;margin-bottom:4px}
.svc .chips{margin-top:auto;padding-top:16px}
.feat{display:grid;padding:0}
.feat .txt{padding:clamp(24px,3vw,34px);position:relative;z-index:1}
.feat .pic{position:relative;min-height:230px;overflow:hidden}
.feat .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat h3{font-size:clamp(25px,2.8vw,32px)}
.feat .solve{font-size:clamp(20px,2.1vw,23px);border-top-color:var(--a-line)}
.legend-tile{display:flex;flex-direction:column;justify-content:center;gap:14px}
.legend-tile .row{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink)}
.legend-tile .sw{width:40px;height:26px;border-radius:9px;flex:none}
.legend-tile .sw.a{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.legend-tile .sw.d{background:transparent;border:1.5px dashed var(--line)}
@media(min-width:760px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .feat .pic{min-height:0}
  .legend-tile{grid-column:1/-1}
}
@media(min-width:1024px){.bento{grid-template-columns:repeat(3,minmax(0,1fr))}.feat{grid-column:span 2}.legend-tile{grid-column:auto}}

/* ---------- 03 leak ---------- */
.flow{position:relative;max-width:820px;margin-left:auto;margin-right:auto}
.flow .orb{width:min(620px,110%);height:260px;left:50%;top:150px;transform:translate(-50%,-50%)}
.srcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap}
.flow svg.ln{display:block;width:100%;height:56px;overflow:visible}
.search{display:flex;align-items:center;gap:12px;margin:0 auto;width:min(560px,100%);padding:16px 22px;border-radius:999px;font-size:clamp(16px,1.8vw,19px);font-weight:500;color:var(--ink)}
.search svg{width:22px;height:22px;color:var(--ink3);flex:none}
.search .cur{width:2px;height:22px;background:var(--a1);border-radius:2px;margin-left:-6px}
.paths{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.pth{border-radius:24px;padding:clamp(16px,2.4vw,28px)}
.pth h4{font-size:clamp(16px,1.9vw,21px);line-height:1.3}
.pth ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px;font-size:clamp(13px,1.5vw,15.5px);line-height:1.45}
.pth li{display:flex;gap:8px}
.pth li i{font-style:normal;flex:none;width:16px;text-align:center}
.pth .res{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2);font-size:clamp(16px,2vw,22px);font-weight:600}
.pth.bad{background:var(--tile);color:var(--ink3)}
.pth.bad h4{color:var(--ink2)}
.pth.bad li i{color:#C7C7CC}
.pth.bad .res{color:var(--ink3);border-top-color:#E3E3E8}
.pth.good{background:#fff;color:var(--ink2);box-shadow:inset 0 0 0 1.5px rgba(255,122,47,.5),0 24px 50px -26px rgba(255,106,31,.6)}
.pth.good li i{color:var(--a1)}
.pth.good .res{color:var(--a-deep);border-top-color:var(--a-line)}
.concl{display:flex;gap:14px;align-items:flex-start;margin-top:clamp(28px,4vw,44px);padding:18px 22px;border-radius:22px;font-size:clamp(15.5px,1.7vw,18px);line-height:1.6;color:var(--ink)}
@media(max-width:759px){.concl{flex-direction:column;gap:10px}}
.concl b,.tip b{flex:none;font-size:12.5px;font-weight:600;color:#fff;background:linear-gradient(180deg,#FF9147,#FF6A1F);border-radius:999px;padding:3px 10px;margin-top:2px;letter-spacing:.04em}

/* ---------- 04 stages ---------- */
.stages{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.sg{display:flex;flex-direction:column}
.lv{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lv b{font-size:13px;font-weight:600;padding:4px 12px;border-radius:999px;background:#fff;color:var(--a-deep);box-shadow:inset 0 0 0 1px var(--a-line)}
.lv span{font-size:14px;color:var(--ink3)}
.sg h3{margin-top:16px;font-size:clamp(22px,2.4vw,27px)}
.combo{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:16px}
.look{margin-top:auto;padding-top:18px;display:flex;gap:10px;font-size:14.5px;color:var(--ink2);line-height:1.5}
.look b{flex:none;color:var(--ink);font-weight:600}
.sg.full{display:grid;padding:0}
.sg.full .txt{padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column}
.sg.full .pic{position:relative;height:230px;overflow:hidden}
.sg.full .pic img{position:absolute;left:50%;top:50%;height:118%;width:auto;max-width:none;transform:translate(-50%,-50%)}
.sg.full .look{padding-top:22px}
@media(min-width:760px){
  .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg.full{grid-column:1/-1;grid-template-columns:1.1fr .9fr}
  .sg.full .pic{height:auto;min-height:300px;order:2}
}

/* ---------- 05 platforms ---------- */
.pf{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.pf .big{font-family:"Inter",sans-serif;font-size:clamp(40px,5vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1}
.pf .more{margin-top:14px;padding-top:12px;border-top:1px solid #E3E3E8;font-size:13.5px;color:var(--ink3)}
.pf .who{margin-top:8px;font-size:15px;color:var(--ink2)}
.pl{list-style:none;margin-top:22px;display:flex;flex-direction:column}
.pl li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid #E3E3E8}
.pl li:first-child{border-top:0}
.pl .pi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);flex:none}
.pl .pi svg{width:22px;height:22px}
.pl b{font-size:17px;font-weight:600}
.pl small{margin-left:auto;font-size:13.5px;color:var(--ink3)}
.mkt{grid-column:1/-1}
.mkt h3{font-size:21px}
.mg{display:grid;grid-template-columns:minmax(0,1fr);margin-top:16px}
.mg div{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid #E3E3E8}
.mg div:first-child{border-top:0}
.mg b{font-size:16px;font-weight:600}
.mg span{font-size:15px;color:var(--ink2)}
.tip{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:16px 20px;border-radius:20px;background:var(--a-soft);font-size:15px;line-height:1.55;color:#6B3410}
@media(min-width:760px){
  .pf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .mg div{display:block;border-top:0;border-left:1px solid #E3E3E8;padding:4px 0 4px 16px}
  .mg div:first-child{border-left:0;padding-left:0}
  .mg b{display:block;font-size:17px}
  .mg span{display:block;margin-top:6px;font-size:14.5px;line-height:1.7}
}

/* ---------- 06 timeline ---------- */
.chart{padding:clamp(22px,3vw,40px)}
.tl-row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 12px;padding:16px 0;border-top:1px solid #E3E3E8;align-items:center}
.tl-row .nm{font-size:17px;font-weight:600;color:var(--ink)}
.tl-row .nm .en{display:block;font-size:12px;font-weight:500}
.tl-row .lb{font-size:13.5px;color:var(--ink2)}
.tl-row .bar{order:3;margin-top:6px;position:relative;height:12px;border-radius:999px;background:#E8E8ED;overflow:hidden}
.tl-row .bar i{position:absolute;inset:0;border-radius:999px}
.axis{position:relative;height:20px;font-size:12px;color:var(--ink3)}
.axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.axis span:first-child{transform:none}.axis span:last-child{transform:translateX(-100%)}
.tl-axis{padding-bottom:10px}
.chart .legend{margin-top:18px}
.chart .legend i{width:44px;height:8px;border-radius:99px;background:linear-gradient(90deg,#FFE7D6,#FF6A1F);box-shadow:none}
.foot-note{margin-top:14px;font-size:12.5px;color:var(--ink3);line-height:1.6}
@media(min-width:760px){
  .tl-axis,.tl-row{display:grid;grid-template-columns:180px minmax(0,1fr) 230px;gap:24px;align-items:center}
  .tl-axis .axis{grid-column:2}
  .tl-row .bar{order:0;margin-top:0;grid-column:2;grid-row:1}
  .tl-row .lb{grid-column:3}
}

/* ---------- 07 boundary ---------- */
.dd{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.dd h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dd ul{list-style:none;margin-top:16px;display:flex;flex-direction:column}
.dd li{display:grid;grid-template-columns:26px 1fr;gap:4px 10px;padding:12px 0;border-top:1px solid #E3E3E8;align-items:baseline}
.dd li:first-child{border-top:0}
.dd li b{font-size:17px;font-weight:600}
.dd li b + span{grid-column:2;font-size:14px;color:var(--ink2);margin-top:-2px}
.dd .ck{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#FF9147,#FF6A1F);color:#fff;align-self:center}
.dd .ck svg{width:12px;height:12px}
.dd .ds{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink3);align-self:center}
.dd .ds svg{width:10px;height:10px}
.dd .ghost li b{color:var(--ink2)}
.dd .ghost li{border-top-color:var(--line2)}
@media(min-width:760px){.dd{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 08 why / promise ---------- */
.why{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.why .tile{display:grid;grid-template-columns:46px 1fr;column-gap:16px;align-items:start;padding:20px}
.why .tile .ico{grid-row:span 3}
.why h3{font-size:19px}
.why .en.sub{display:block;font-size:12.5px;margin-top:1px}
.why p{margin-top:6px;font-size:14.5px}
@media(min-width:760px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.why{grid-template-columns:repeat(4,minmax(0,1fr))}.why .tile{display:block;padding:26px 24px}.why h3{margin-top:18px;font-size:20px}}

/* ---------- 09 list nav / pairs ---------- */
.lists,.pairs{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.nv{display:grid;grid-template-columns:52px 1fr auto;gap:4px 16px;align-items:center;transition:transform .25s ease,box-shadow .25s ease}
.nv:hover{transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(0,0,0,.3)}
.nv .num{font-family:"Inter",sans-serif;font-weight:700;font-size:clamp(32px,4vw,42px);letter-spacing:-.03em;line-height:1;grid-row:span 2}
.nv h3{font-size:20px}
.nv h3 .en{font-size:12.5px}
.nv p{font-size:14.5px;grid-column:2}
.nv .mode{grid-column:2;justify-self:start;margin-top:8px}
.nv .go{grid-row:1/span 3;grid-column:3;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink)}
.nv .go svg{width:16px;height:16px}
.nv.ghost .num{color:var(--ink3)}
@media(min-width:760px){.lists,.pairs{grid-template-columns:repeat(2,minmax(0,1fr))}.nv.ghost{grid-column:1/-1}.nv{grid-template-columns:68px 1fr auto}}

/* ---------- closing ---------- */
.close{text-align:center;padding-bottom:clamp(28px,4vw,48px)}
.close .eyebrow{justify-content:center}
.close .en.big{display:block;font-size:clamp(18px,2.1vw,24px);margin-top:14px;color:var(--ink2)}
.close .sub-c{margin:14px auto 0;font-size:clamp(17px,1.8vw,20px);color:var(--ink2)}
.close .stage{position:relative;max-width:820px;margin:clamp(4px,2vw,16px) auto 0}
.close .stage .orb{width:70%;height:50%;left:15%;top:30%}
.contact{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:-5%;position:relative;z-index:2}
.contact .f{flex:0 1 200px;min-width:160px;padding:12px 20px 13px;border-radius:20px;text-align:left;font-size:12.5px;color:var(--ink3);line-height:1.4}
.contact .f b{display:block;margin-top:2px;font-size:16px;font-weight:600;color:var(--ink)}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;max-width:1000px;margin:clamp(48px,7vw,80px) auto 0;padding-top:20px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--ink3);text-align:left}
.foot .wm{font-size:15px;color:var(--ink)}
.foot .ig{font-family:var(--mark);font-weight:600;font-size:8px;letter-spacing:.5em;color:var(--ink3);margin-left:10px}

/* ================= module list pages ================= */
.lh{display:grid;gap:8px;align-items:center}
.lh h1{margin-top:18px;font-size:clamp(44px,6.6vw,78px)}
.lh .en.big{display:block;font-size:clamp(17px,1.9vw,22px);margin-top:12px;color:var(--ink2)}
.lh .chips{margin-top:22px}
.solve-lg{margin-top:24px;padding-top:20px;border-top:1px solid var(--line2);font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink);font-weight:500;max-width:24em}
.solve-lg small{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ink3);margin-bottom:6px}
.lh-vis{position:relative;margin:4px calc(-1*var(--pad)) 0}
.lh-vis .orb{width:70%;height:60%;left:15%;top:25%}
.lh-vis .im{position:relative;aspect-ratio:1.3}
.lh-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 84%,transparent),linear-gradient(0deg,transparent,#000 18%,#000 72%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 84%,transparent),linear-gradient(0deg,transparent,#000 18%,#000 72%,transparent);mask-composite:intersect}
.lh-vis img.ct{object-fit:contain}
.facts{position:relative;z-index:2;display:grid;gap:8px;margin:-40px var(--pad) 0}
.fact{border-radius:20px;padding:13px 18px 14px}
.fact small{display:block;font-size:12px;color:var(--ink3);letter-spacing:.04em}
.fact b{display:block;font-size:clamp(15px,1.3vw,16.5px);font-weight:600;color:var(--ink);margin-top:2px;line-height:1.35}
@media(min-width:900px){
  .lh{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px}
  .lh-vis{margin:0 calc(-1*var(--pad)) 0 0}
  .facts{position:absolute;left:4%;right:8%;bottom:0;margin:0;grid-template-columns:repeat(3,minmax(0,1fr))}
}
.grp{margin-top:clamp(34px,4.5vw,50px)}
.grp:first-of-type{margin-top:0}
.gh{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding-bottom:16px}
.gh h3{font-size:clamp(21px,2.3vw,26px)}
.gh h3 .en{font-size:13px;font-weight:500;margin-left:10px}
.items{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.it{display:flex;flex-direction:column;padding:22px 22px 20px;border-radius:22px}
.it .nm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-right:18px}
.it h3{font-size:20px}
.opt{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:linear-gradient(180deg,#FF9147,#FF6A1F);color:#fff;letter-spacing:.02em}
.it p{margin-top:6px;font-size:15px}
.it .dl{margin-top:auto;padding-top:16px}
.it .chip svg{width:14px;height:14px;flex:none}
.it.hi{background:linear-gradient(160deg,#FFF1E7,#FFF9F5 60%,#FFFFFF);box-shadow:inset 0 0 0 1px var(--a-line)}
.it.hi::after{content:"";position:absolute;right:20px;top:26px;width:8px;height:8px;border-radius:50%;background:var(--a1);box-shadow:0 0 0 4px rgba(255,122,47,.16)}
@media(min-width:760px){.items{grid-template-columns:repeat(2,minmax(0,1fr))}.items .it:last-child:nth-child(odd){grid-column:1/-1}}
.items-note{margin-top:clamp(28px,4vw,40px)}
.hi-key{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink3);margin-bottom:18px}
.hi-key::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--a1);box-shadow:0 0 0 4px rgba(255,122,47,.16)}
.meas{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ms{border-radius:22px;padding:22px}
.ms b{display:block;font-size:clamp(24px,2.6vw,30px);font-weight:600;letter-spacing:-.01em}
.ms small{display:block;margin-top:4px;font-size:14px;color:var(--ink2)}
.ms.on{background:linear-gradient(160deg,#FFF1E7,#FFF9F5 60%,#FFFFFF);box-shadow:inset 0 0 0 1px var(--a-line)}
.ms.on b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ms.off{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border:1.5px dashed var(--line);background:transparent}
.ms.off b{color:var(--ink3);font-size:22px}
@media(min-width:900px){.meas{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cfg{margin-top:12px}
.cfg h3{font-size:20px}
.cfgr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.cfgr div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:18px 20px;border-radius:20px;background:#fff}
.cfgr b{font-family:"Inter",sans-serif;font-size:clamp(48px,6vw,70px);font-weight:700;letter-spacing:-.04em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cfgr span{font-size:14.5px;color:var(--ink2)}
.cfg p{margin-top:14px;font-size:14px;color:var(--ink3)}
.ways{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
.way{padding:18px 18px 20px;border-radius:20px}
.way small{display:block;font-size:12px;color:var(--ink3);letter-spacing:.04em}
.way b{display:block;margin-top:4px;font-size:clamp(16px,2vw,21px);font-weight:600;line-height:1.3}
.proc{margin-top:clamp(34px,5vw,52px)}
@media(min-width:1024px){.jr.j4{grid-template-columns:repeat(4,minmax(0,1fr))}.jr.j4::before{left:12.5%;right:12.5%}}
.rules{list-style:none;margin-top:clamp(26px,4vw,38px);padding:20px 24px;border-radius:22px;display:flex;flex-direction:column;gap:10px;font-size:15.5px;color:var(--ink);background:var(--a-soft)}
.rules li{display:flex;gap:12px;align-items:baseline}
.rules li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--a1);transform:translateY(-2px)}

/* ================= pricing & build-vs-partner ================= */
/* build vs partner: range bars */
.cmp{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.cc{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,32px)}
.cc-h{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.cc-h h3{font-size:clamp(21px,2.3vw,25px)}
.scale{position:relative;height:16px;margin:22px 0 2px;font-family:"Inter","Noto Sans SC",sans-serif;font-size:11.5px;color:var(--ink3)}
.scale span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.scale span:first-child{transform:none}.scale span:last-child{transform:translateX(-100%)}
.cr{padding:14px 0 16px;border-top:1px solid #E3E3E8}
.cr-t{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cr-t b{display:block;font-size:16.5px;font-weight:600;line-height:1.35}
.cr-t small{display:block;font-size:13px;color:var(--ink3);margin-top:1px;line-height:1.4}
.cr-t .v{flex:none;text-align:right;font-family:"Inter","Noto Sans SC",sans-serif;font-size:clamp(18px,2vw,21px);font-weight:600;letter-spacing:-.01em;white-space:nowrap;line-height:1.3}
.cr-t .v small{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:0}
.track{position:relative;height:10px;margin-top:12px;border-radius:999px;background:#E8E8ED}
.track i{position:absolute;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#CACACF,#A9A9AF)}
.track::after{content:"";position:absolute;top:-6px;bottom:-6px;left:var(--us,35%);border-left:1.5px dashed var(--a1)}
.cr .det .nw{white-space:nowrap}
.cr .det{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--ink3)}
.cr.us{margin-top:6px;padding:16px 18px 18px;border:0;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,122,47,.5),0 20px 40px -26px rgba(255,106,31,.6)}
.cr.us .cr-t small{color:var(--ink2)}
.cr.us .v{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cr.us .track{margin-left:-18px;margin-right:-18px;background:linear-gradient(90deg,rgba(240,240,243,0),#F0F0F3 10%,#F0F0F3 90%,rgba(240,240,243,0))}
.cr.us .track::after{display:none}
.cr.us .track i{width:20px;height:20px;top:-5px;bottom:auto;border-radius:50%;transform:translateX(-50%);background:linear-gradient(180deg,#FF9147,#FF6A1F);box-shadow:0 0 0 4px #fff,0 6px 14px -4px rgba(255,106,31,.7)}
.cr.us .det{color:var(--ink2)}
.cc .key{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--ink3)}
.cc .key i{width:20px;border-top:1.5px dashed var(--a1)}
@media(min-width:900px){.cmp{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* cost vs us lists */
.paths.st{grid-template-columns:minmax(0,1fr)}
.paths.st ul{gap:12px}
.paths.st li span b{font-weight:600;margin-right:6px}
.pth.bad li span b{color:var(--ink2)}
.pth.good li span b{color:var(--ink)}
@media(min-width:760px){.paths.st{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* stage fee */
.fee{margin-top:16px;padding:12px 16px;border-radius:16px;background:#fff;font-size:14.5px;line-height:1.55;color:var(--ink)}
.fee small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--ink3);margin-bottom:2px}
.fee b{font-weight:600;color:var(--a-deep)}
.tile .fee{box-shadow:0 1px 2px rgba(0,0,0,.04)}
/* list nav price */
.nv .px{grid-column:2;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:8px}
.nv .px .mode{margin-top:0}
.nv .px b{font-family:"Inter","Noto Sans SC",sans-serif;font-size:15px;font-weight:600;color:var(--ink)}
.nv .px .rm{font-size:12.5px;color:var(--ink3)}
.cr-t .v small{color:var(--ink3);-webkit-text-fill-color:var(--ink3);font-weight:500;margin-top:2px}
.nv.main{background:linear-gradient(160deg,#FFF1E7,#FFF9F5 60%,#FFFFFF);box-shadow:inset 0 0 0 1px var(--a-line)}
.nv.main .px b{color:var(--a-deep)}
/* item price */
.it .dl{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.pr{font-family:"Inter","Noto Sans SC",sans-serif;font-size:14px;font-weight:600;color:var(--ink2);line-height:1.4}
.pr small{font-size:12px;font-weight:500;color:var(--ink3)}
.pr.cu{font-family:var(--sans);font-size:12.5px;color:var(--a-deep);padding:4px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--a-line);background:#fff}
.pr.in{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink3)}
/* plans */
.plans{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.plan{display:flex;flex-direction:column;border-radius:24px;padding:clamp(24px,2.8vw,34px);background:var(--tile)}
.plan .ph{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.plan h3{font-size:clamp(21px,2.3vw,25px)}
.plan h3 .en{font-size:13px;font-weight:500;margin-left:8px;letter-spacing:0}
.plan .who{margin-top:6px;font-size:14.5px;color:var(--ink2)}
.plan .price{margin-top:18px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan .price b{font-family:"Inter","Noto Sans SC",sans-serif;font-size:clamp(40px,5vw,56px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.plan .price span{font-size:15px;color:var(--ink2);font-weight:500}
.plan .usd{display:block;margin-top:6px;font-family:"Inter",sans-serif;font-size:13px;color:var(--ink3)}
.plan ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:9px;font-size:15px;line-height:1.5;color:var(--ink)}
.plan li{display:flex;gap:10px;align-items:baseline}
.plan li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--ink3);transform:translateY(-2px)}
.plan .cmpv{margin-top:auto;padding-top:20px}
.plan .cmpv span{display:block;padding-top:14px;border-top:1px solid #E3E3E8;font-size:13.5px;color:var(--ink3);line-height:1.5}
.plan.main{background:linear-gradient(160deg,#FFEEE2 0%,#FFF7F1 55%,#FFFFFF 100%);box-shadow:inset 0 0 0 1.5px rgba(255,122,47,.45),0 26px 50px -30px rgba(255,106,31,.6)}
.plan.main .price b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan.main li::before{background:var(--a1)}
.plan.main .cmpv span{border-top-color:var(--a-line);color:var(--a-deep)}
.plan.sub .price b{font-size:clamp(30px,3.6vw,40px);color:var(--ink2)}
.plan.sub h3{color:var(--ink2)}
.plan.sub ul{color:var(--ink2);font-size:14.5px}
@media(min-width:760px){.plans{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
/* credits */
.credit{margin-top:12px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:center}
.cx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cx div{background:#fff;border-radius:18px;padding:16px 18px 18px}
.cx b{display:block;font-family:"Inter","Noto Sans SC",sans-serif;font-size:clamp(30px,3.6vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.05;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx b small{font-size:15px;font-weight:600;letter-spacing:0;margin-left:4px}
.cx span{display:block;margin-top:8px;font-size:15px;font-weight:600;color:var(--ink)}
.cx em{font-style:normal;display:block;margin-top:2px;font-size:13px;color:var(--ink3)}
.eg small{display:block;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink3)}
.eg .chips{margin-top:10px}
.eg .chip{border-radius:14px}
.eg .chip b{flex:none;margin-left:auto;padding-left:4px;font-weight:600;white-space:nowrap}
.eg-n{margin-top:12px;font-size:13px;line-height:1.6;color:var(--ink3)}
@media(min-width:900px){.credit{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
/* module boundary strip */
.bd{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.bd + div{margin-top:clamp(34px,4.5vw,50px)}
.bd div{border-radius:20px;padding:16px 18px;background:var(--tile)}
.bd small{font-family:"Inter",sans-serif;font-size:12px;font-weight:600;color:var(--ink3)}
.bd b{display:block;margin-top:4px;font-size:16px;font-weight:600;line-height:1.35}
.bd span{display:block;margin-top:4px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.bd .on{background:linear-gradient(160deg,#FFEEE2 0%,#FFF7F1 55%,#FFFFFF 100%);box-shadow:inset 0 0 0 1.5px rgba(255,122,47,.45)}
.bd .on small{color:var(--a-deep)}
@media(min-width:900px){.bd{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- package cards v3: package price first, itemised lines, discount ---- */
.plan .price .off{align-self:center;font-style:normal;font-family:"Inter",sans-serif;font-size:14px;font-weight:700;letter-spacing:.01em;color:#fff;background:var(--grad);padding:4px 10px;border-radius:999px;margin-left:6px;line-height:1.3}
.plan .usd s{text-decoration-thickness:1px}
.plan ul.lines{gap:0;margin-top:18px;padding-bottom:18px;font-size:14.5px}
.plan ul.lines li{justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-top:1px solid rgba(0,0,0,.07)}
.plan ul.lines li::before{display:none}
.plan ul.lines li span{min-width:0}
.plan ul.lines li b{flex:none;font-family:"Inter","Noto Sans SC",sans-serif;font-size:14.5px;font-weight:600;white-space:nowrap}
.plan ul.lines li b.in{font-weight:500;color:var(--ink3)}
.plan .cmpv{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid rgba(0,0,0,.12)}
.plan .cmpv span,.plan.main .cmpv span{display:inline;padding:0;border:0;font-size:13.5px;color:var(--ink3);line-height:1.5}
.plan .cmpv .save,.plan.main .cmpv .save{font-weight:600;color:var(--a-deep);background:var(--a-soft);padding:4px 11px;border-radius:999px}
.plan.main ul.lines li{border-top-color:rgba(184,67,15,.12)}
.plan.main .cmpv{border-top-color:rgba(184,67,15,.22)}
.plan.main .cmpv .save{background:#fff;box-shadow:inset 0 0 0 1px var(--a-line)}
.tier{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;letter-spacing:.02em;line-height:1.5}
/* advanced tier: graphite card */
.plan.pro{background:linear-gradient(160deg,#3A3A40 0%,#232326 55%,#1D1D1F 100%);color:#F5F5F7;box-shadow:0 26px 50px -30px rgba(0,0,0,.6)}
.plan.pro h3{color:#fff}
.plan.pro h3 .en{color:rgba(255,255,255,.5)}
.plan.pro .who{color:rgba(255,255,255,.66)}
.plan.pro .price b{color:#fff}
.plan.pro .price span{color:rgba(255,255,255,.66)}
.plan.pro .usd{color:rgba(255,255,255,.5)}
.plan.pro ul.lines{color:rgba(255,255,255,.88)}
.plan.pro ul.lines li{border-top-color:rgba(255,255,255,.12)}
.plan.pro ul.lines li b{color:#fff}
.plan.pro ul.lines li b.in{color:rgba(255,255,255,.5)}
.plan.pro .cmpv{border-top-color:rgba(255,255,255,.18)}
.plan.pro .cmpv span{color:rgba(255,255,255,.6)}
.plan.pro .cmpv .save{color:#FFB07A;background:rgba(255,122,47,.18)}
.plan.pro .tier{color:#FFB07A;box-shadow:inset 0 0 0 1px rgba(255,176,122,.55)}
/* alternative option: white card */
.plan.alt{background:#fff;box-shadow:inset 0 0 0 1px var(--line2),0 22px 44px -32px rgba(0,0,0,.3)}
.plan.alt .tier{color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}
.plan.alt .price b{font-size:clamp(32px,3.8vw,44px)}
/* add-ons */
.adds{margin-top:12px;padding:clamp(20px,2.4vw,28px);border-radius:24px;background:var(--tile)}
.adds .t,.credit .t{font-size:15px;font-weight:600;color:var(--ink)}
.adds .t i,.credit .t i{font-style:normal;font-family:"Inter",sans-serif;font-size:13px;font-weight:500;color:var(--ink3);margin-left:8px}
.adds .ar{margin-top:12px;display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.adds .ar div{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border-radius:16px;padding:13px 16px}
.adds .ar span{font-size:15px;font-weight:500;min-width:0}
.adds .ar b{flex:none;font-family:"Inter","Noto Sans SC",sans-serif;font-size:14.5px;font-weight:600;white-space:nowrap}
.adds .ar b.cu{font-size:12.5px;color:var(--a-deep);padding:4px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--a-line)}
@media(min-width:760px){.adds .ar{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}
/* social content credits */
.credit.soc{display:block}
.credit .t{grid-column:1/-1}
.soc .t + .cx{margin-top:12px}
.plan .price.txt b{font-size:clamp(26px,2.8vw,32px);color:var(--ink)}
.cx.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
.soc .eg{margin-top:22px}
.modes{margin-top:10px;display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.md{display:flex;flex-direction:column;background:#fff;border-radius:20px;padding:18px 18px 16px}
.md.on{box-shadow:inset 0 0 0 1.5px rgba(255,122,47,.5),0 20px 40px -28px rgba(255,106,31,.6)}
.md .mh{display:flex;align-items:baseline;gap:8px}
.md .mh b{font-size:17px;font-weight:600}
.md .mh .en{font-size:12.5px}
.md.on .mh::after{content:"默认";margin-left:auto;align-self:center;font-size:11.5px;font-weight:600;color:var(--a-deep);background:var(--a-soft);padding:2px 8px;border-radius:999px}
.md p{margin-top:4px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.mbar{display:flex;gap:2px;height:10px;margin-top:14px;border-radius:999px;overflow:hidden}
.mbar i{display:block;min-width:0}
.md small{display:block;margin:8px 0 14px;font-size:12.5px;color:var(--ink3);line-height:1.5}
.md .mn{margin-top:auto;padding-top:12px;border-top:1px solid #EFEFF2;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;font-size:14px;color:var(--ink2)}
.md .mn b{font-family:"Inter",sans-serif;font-size:30px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1}
.md .mn span{margin-left:auto;font-size:13px;color:var(--ink3)}
.soc .legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:12.5px;color:var(--ink3)}
.soc .legend span{display:inline-flex;align-items:center;gap:6px}
.soc .legend i{width:10px;height:10px;border-radius:3px}
@media(min-width:900px){.cx.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.modes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ================= v3: overview screens and list additions ================= */
/* list hero lead (replaces English tagline + solve block) */
.lh .lead{margin-top:20px;font-size:clamp(17px,1.8vw,19px);line-height:1.65;color:var(--ink2);max-width:26em}
.lh .lead b{color:var(--ink);font-weight:600}
/* cover: positioning, two entry cards, pilot link */
.cover h1{font-size:clamp(38px,5.4vw,64px)}
.cv .sub-h{display:block;margin-top:14px;font-size:clamp(19px,2.2vw,24px);font-weight:500;color:var(--ink2)}
.ent{display:grid;gap:10px;margin-top:26px;grid-template-columns:minmax(0,1fr)}
.ent a{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 18px;border-radius:20px;transition:transform .25s ease}
.ent a:hover{transform:translateY(-2px)}
.ent a > div{min-width:0;flex:1}
.ent small{display:block;font-size:12.5px;font-weight:600;color:var(--a-deep)}
.ent b{display:block;margin-top:2px;font-family:"Inter","Noto Sans SC",sans-serif;font-size:19px;font-weight:700;letter-spacing:-.01em}
.ent div > span{display:block;margin-top:2px;font-size:13px;color:var(--ink2);line-height:1.45}
.go2{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff}
.go2 svg{width:14px;height:14px}
.trial{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:14.5px;color:var(--ink2)}
.trial b{color:var(--a-deep);font-weight:600}
.trial svg{width:13px;height:13px;color:var(--a-deep)}
@media(min-width:560px){.ent{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* work samples (placeholders until footage arrives) */
.works{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.wk{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:linear-gradient(165deg,#ECECEF 0%,#F7F7F9 55%,#E6E6EB 100%)}
.wk.c{background:linear-gradient(165deg,#FFE6D4 0%,#FFF6EF 55%,#FFDCC4 100%)}
.wk .play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.8);color:var(--ink);box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
.wk .play svg{width:20px;height:20px;margin-left:3px}
.wk .tbd{position:absolute;left:12px;top:12px;font-size:11.5px;font-weight:600;color:var(--ink3);background:rgba(255,255,255,.85);padding:3px 9px;border-radius:999px}
.wk b{font-size:17px;font-weight:600;line-height:1.35}
.wk small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink2);line-height:1.4}
@media(min-width:900px){.works{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* where you're stuck -> which plan */
.stuck{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.sk{display:flex;flex-direction:column;gap:16px;transition:transform .25s ease,box-shadow .25s ease}
.sk:hover{transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(0,0,0,.3)}
.sk .q{font-size:clamp(18px,1.9vw,20px);font-weight:600;line-height:1.45;color:var(--ink)}
.sk .ans{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid #E3E3E8}
.sk .ans > div{flex:1;min-width:0}
.sk .ans small{display:block;font-size:12px;color:var(--ink3)}
.sk .ans b{display:block;margin-top:1px;font-size:16px;font-weight:600;color:var(--a-deep)}
.sk.main{background:linear-gradient(160deg,#FFF1E7,#FFF9F5 60%,#FFFFFF);box-shadow:inset 0 0 0 1px var(--a-line)}
.sk.main .ans{border-top-color:var(--a-line)}
@media(min-width:760px) and (max-width:1023px){.stuck{grid-template-columns:repeat(2,minmax(0,1fr))}.sk:last-child:nth-child(odd){grid-column:1/-1}}
@media(min-width:1024px){.stuck{grid-template-columns:repeat(6,minmax(0,1fr))}.sk{grid-column:span 2}.sk:nth-child(-n+2){grid-column:span 3}}
/* plans: equal columns, call to action, sub heading */
@media(min-width:760px){.plans.eq{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan .cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:600}
.plan .cta svg{width:14px;height:14px}
.plan .pnote{margin-top:auto;padding-top:14px;border-top:1px solid rgba(0,0,0,.12);font-size:13.5px;color:var(--ink2);line-height:1.55}
.plan .pnote b{color:var(--a-deep);font-weight:600}
.sub-t{margin-top:clamp(30px,4vw,44px);margin-bottom:12px;font-size:15px;font-weight:600;color:var(--ink)}
.sub-t i{font-style:normal;font-family:"Inter",sans-serif;font-size:13px;font-weight:500;color:var(--ink3);margin-left:8px}
.sub-t + .plans{margin-top:0}
/* how to start: three steps + weekly cadence */
@media(min-width:1024px){.jr.j3{grid-template-columns:repeat(3,minmax(0,1fr))}.jr.j3::before{left:16.7%;right:16.7%}}
.js .pz{display:block;margin-top:10px;font-family:"Inter","Noto Sans SC",sans-serif;font-size:15px;font-weight:600;color:var(--a-deep)}
.cad{margin-top:12px;padding:clamp(20px,2.4vw,28px);border-radius:24px;background:var(--tile)}
.cad .t{font-size:15px;font-weight:600;color:var(--ink)}
.cad .t i{font-style:normal;font-family:"Inter",sans-serif;font-size:13px;font-weight:500;color:var(--ink3);margin-left:8px}
.cad .row{margin-top:14px;display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.cad .d{background:#fff;border-radius:16px;padding:14px 16px}
.cad .d small{display:block;font-size:12px;font-weight:600;color:var(--a-deep)}
.cad .d b{display:block;margin-top:2px;font-size:16px;font-weight:600;line-height:1.35}
.cad .d span{display:block;margin-top:3px;font-size:13px;color:var(--ink2);line-height:1.5}
.cad .d.mk{background:linear-gradient(160deg,#FFEEE2,#FFF7F1 55%,#FFFFFF);box-shadow:inset 0 0 0 1.5px rgba(255,122,47,.45)}
.cad p{margin-top:12px;font-size:13.5px;color:var(--ink2);line-height:1.6}
@media(min-width:900px){.cad .row{grid-template-columns:1fr 1fr 1fr 1.4fr}}
/* FAQ */
.faq{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.qa{padding:20px 22px;border-radius:22px;background:var(--tile)}
.qa h3{font-size:17px;line-height:1.45}
.qa p{margin-top:6px;font-size:15px;color:var(--ink2);line-height:1.65}
@media(min-width:900px){.faq{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* compact spec groups (site build) */
.spec{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.sp h3{font-size:20px}
.sp ul{list-style:none;margin-top:12px}
.sp li{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:2px 14px;padding:10px 0;border-top:1px solid #E3E3E8}
.sp li b{font-size:15.5px;font-weight:600}
.sp li span{margin-left:auto;font-size:13.5px;color:var(--ink2);text-align:right}
@media(min-width:760px){.spec{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* close: links, related lists */
.contact .f a{color:inherit}
.contact .f.w{flex-basis:250px}
.rel{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.rel a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--tile);font-size:13.5px;font-weight:500;color:var(--ink2)}
.rel a:hover{color:var(--ink)}
.rel small{font-size:12.5px;color:var(--ink3);width:100%;text-align:center}
.adds + .adds{margin-top:12px}
.adds .ar b.mu{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink3)}

/* ================= pitch (对外商务版) ================= */
.facts3{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.facts3 span{display:inline-flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line2);font-size:14px;color:var(--ink2)}
.facts3 b{font-family:"Inter","Noto Sans SC",sans-serif;font-size:16px;font-weight:700;color:var(--a-deep)}
/* what we do: two featured services + three short ones */
.offer{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.of{display:flex;flex-direction:column;gap:6px;transition:transform .25s ease,box-shadow .25s ease}
.of:hover{transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(0,0,0,.3)}
.of .rl{font-size:12.5px;font-weight:600;color:var(--ink3);letter-spacing:.02em}
.of h3{font-size:clamp(20px,2.2vw,24px)}
.of p{font-size:15px}
.of .pz{margin-top:auto;padding-top:14px;border-top:1px solid #E3E3E8;display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:"Inter","Noto Sans SC",sans-serif;font-size:16px;font-weight:600;color:var(--ink)}
.of .pz small{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink3)}
.of.big{background:linear-gradient(160deg,#FFF1E7,#FFF9F5 60%,#FFFFFF);box-shadow:inset 0 0 0 1px var(--a-line)}
.of.big .rl{color:var(--a-deep)}
.of.big .pz{border-top-color:var(--a-line);color:var(--a-deep);font-size:18px}
.of.big h3{font-size:clamp(24px,2.6vw,30px)}
@media(min-width:760px){.offer{grid-template-columns:repeat(6,minmax(0,1fr))}.of{grid-column:span 2}.of.big{grid-column:span 3}}
/* what you get: three things */
.get{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.gt{display:grid;grid-template-columns:46px 1fr;column-gap:16px;align-items:start}
.gt .ico{grid-row:span 2}
.gt h3{font-size:19px}
.gt p{margin-top:4px;font-size:14.5px}
@media(min-width:900px){.get{grid-template-columns:repeat(3,minmax(0,1fr))}.gt{display:block}.gt h3{margin-top:16px;font-size:20px}}
/* three tiers, middle one featured */
.plans.three{grid-template-columns:minmax(0,1fr);margin-top:12px}
@media(min-width:900px){.plans.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:899px){.plans.three .plan.main{order:-1}}
.plans.three .plan .price b{font-size:clamp(36px,4vw,46px)}
.plan.pro ul{color:rgba(255,255,255,.88)}
.plan.pro li::before{background:rgba(255,255,255,.45)}
.plan.pro .pnote{border-top-color:rgba(255,255,255,.18);color:rgba(255,255,255,.66)}
.plan.pro .pnote b{color:#FFB07A}
.plan.main .pnote{border-top-color:var(--a-line)}
.plan.alt.dim .price b{color:var(--ink2)}
.mix{margin-top:12px}
.mix .modes{margin-top:12px}
.mix .md small{margin-bottom:12px}
.swap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:16px 20px;border-radius:20px;background:var(--tile);font-size:15px;color:var(--ink)}
.swap b{font-family:"Inter","Noto Sans SC",sans-serif;font-weight:700;color:var(--a-deep)}
.swap .eq{font-size:13.5px;color:var(--ink3)}
.works + .plans{margin-top:12px}
.works + .foot-note + .plans{margin-top:16px}
.plan ul:not(.lines){padding-bottom:18px}
.close .more-c{margin:10px auto 0;font-size:15px;color:var(--ink3)}
p,li,.cad .d span{text-wrap:pretty}
.sk .q,.qa h3{text-wrap:balance}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.mix .md.on .mh::after{content:attr(data-tag)}
/* lead version (zs.html): tiers without prices, what the client provides */
.sub-t + .offer{margin-top:0}
@media(min-width:760px){.offer.lv .of,.offer.lv .of.big{grid-column:span 2}}
.need{margin-top:12px;padding:20px 24px;border-radius:22px;background:var(--a-soft)}
.need .t{font-size:15px;font-weight:600;color:var(--ink)}
.need ul{list-style:none;margin-top:10px;display:grid;gap:8px 20px;grid-template-columns:minmax(0,1fr)}
.need li{display:flex;gap:12px;align-items:baseline;font-size:15.5px;color:var(--ink)}
.need li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--a1);transform:translateY(-2px)}
.need .n{margin-top:12px;padding-top:12px;border-top:1px solid var(--a-line);font-size:13.5px;color:var(--a-deep)}
@media(min-width:760px){.need ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.offer.lv{align-items:stretch}
.get + .swap{margin-top:12px}
@media(max-width:759px){.offer.lv .of.big{order:-1}}
/* lead version v2: why it matters (sources -> search -> two outcomes) */
.src{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:14px}
.src .chips{display:flex;flex-wrap:wrap;gap:8px}
.src .chips span{padding:7px 14px;border-radius:999px;background:var(--tile);font-size:14px;color:var(--ink2)}
.src .to{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--a-soft);color:var(--a-deep)}
.src .to svg{width:14px;height:14px}
.src b{font-size:16px;font-weight:600}
.paths.fork .res{font-size:clamp(17px,2vw,22px)}
.concl{margin-top:18px;padding:18px 22px;border-radius:20px;background:var(--a-soft);font-size:clamp(16px,1.8vw,18px);font-weight:600;color:var(--a-deep);line-height:1.55}
/* each month: feature rows pairing a visual with what the account gets */
.feats{display:grid;gap:14px}
.ft{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);align-items:center;background:var(--tile);border-radius:28px;padding:clamp(16px,2.4vw,28px)}
@media(min-width:900px){.ft{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}.ft:nth-child(even) .fv{order:2}.ft .fx{padding-right:12px}.ft:nth-child(even) .fx{padding:0 0 0 20px}}
.ft .fx{padding:0 8px 8px}
.ft .k{font-family:"Inter","Noto Sans SC",sans-serif;font-size:clamp(34px,4vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ft h3{margin-top:2px;font-size:clamp(24px,2.7vw,32px);line-height:1.25}
.ft .fx > p:last-child{margin-top:12px;font-size:16px;color:var(--ink2);line-height:1.7}
.fv{position:relative;height:clamp(320px,34vw,400px);border-radius:22px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(165deg,#E9E9EE 0%,#F7F7F9 55%,#E3E3E9 100%)}
.fv.c{background:linear-gradient(165deg,#FFE3CF 0%,#FFF6EF 55%,#FFD7BC 100%)}
.fv .tbd{position:absolute;left:12px;top:12px;z-index:2;font-size:11.5px;font-weight:600;color:var(--ink3);background:rgba(255,255,255,.88);padding:3px 9px;border-radius:999px}
.fv .cap{position:absolute;left:14px;bottom:12px;font-size:12.5px;color:var(--ink2)}
.fv .vf{height:80%;aspect-ratio:9/16;border-radius:18px;background:rgba(255,255,255,.6);box-shadow:0 24px 44px -26px rgba(120,50,10,.45);display:grid;place-items:center}
.fv .play{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
.fv .play svg{width:20px;height:20px;margin-left:3px}
.phm{width:clamp(150px,14vw,168px);aspect-ratio:9/18.5;background:#fff;border-radius:30px;padding:16px 10px 10px;box-shadow:0 0 0 6px #1D1D1F,0 30px 60px -30px rgba(0,0,0,.55)}
.phm .pf{display:flex;align-items:center;gap:8px;padding:0 4px 12px}
.phm .av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--grad)}
.phm .ln{flex:1;display:grid;gap:5px}
.phm .ln i{display:block;height:6px;border-radius:3px;background:#E8E8ED}
.phm .ln i:last-child{width:58%}
.phm .gr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.phm .gr i{aspect-ratio:1;border-radius:4px;background:linear-gradient(160deg,#FFE2CF,#FFF3EA)}
.phm .gr i:nth-child(3n+2){background:linear-gradient(160deg,#ECECF1,#F8F8FA)}
.phm .gr i:nth-child(4n+3){background:linear-gradient(160deg,#FFC9A3,#FFE8D8)}
.phm .gr i:nth-child(5n){background:linear-gradient(160deg,#3A3A40,#5A5A62)}
.chat{width:min(84%,330px);display:flex;flex-direction:column;gap:10px;font-family:"Inter",sans-serif;font-size:14px;line-height:1.4}
.chat p{max-width:82%;padding:10px 14px;border-radius:18px}
.chat .in{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:6px;box-shadow:0 6px 16px -10px rgba(0,0,0,.25)}
.chat .out{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:6px}
.chat .typing{display:flex;gap:4px;padding:13px 14px}
.chat .typing i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.85)}
.rep{width:min(84%,330px);background:#fff;border-radius:20px;padding:20px;box-shadow:0 24px 44px -28px rgba(0,0,0,.35)}
.rep .rt{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;font-weight:600}
.rep .rt small{font-size:12.5px;font-weight:500;color:var(--ink3)}
.rep .rr{margin-top:14px}
.rep .rr span{display:block;font-size:12.5px;color:var(--ink2)}
.rep .rr i{display:block;margin-top:6px;height:8px;border-radius:4px;background:var(--grad)}
.rep .rs{margin-top:18px;padding-top:14px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--ink2)}
.rep .rl2{display:block;margin-top:8px;height:7px;border-radius:4px;background:#ECECF0}
.rep .rl2.s{width:62%}
/* plans described by goal, no prices */
.goal .gl{margin-top:18px;font-size:clamp(24px,2.8vw,30px);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.plan.main.goal .gl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan.pro.goal .gl{color:#fff}
.goal .pnote{margin-top:auto}
.entry-l{margin-top:14px;font-size:14.5px;color:var(--ink3);text-align:center}
.entry-l + .need{margin-top:22px}
.fv.feedv{place-items:start center;padding-top:52px}
/* entry plan: visible but lighter than the two plan cards */
.entry-s{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:18px 22px;border-radius:22px;background:var(--tile);transition:transform .25s ease}
.entry-s:hover{transform:translateY(-2px)}
.entry-s > div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0}
.entry-s .rl{font-size:12.5px;font-weight:600;color:var(--ink3)}
.entry-s b{font-size:19px;font-weight:600}
.entry-s .d{font-size:15px;color:var(--ink2)}
.entry-s .cta{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--a-deep)}
.entry-s .cta .go2{width:28px;height:28px}
.entry-s + .need{margin-top:22px}
/* lead version v3: cover line, case gallery, real tiles in the account mock-up */
.cover.zs h1{font-size:clamp(32px,4.3vw,52px)}
.fv .vf{overflow:hidden;position:relative}
.fv .vf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fv .vf .play{position:relative;z-index:1}
.phm .gr i{overflow:hidden}
.phm .gr img{display:block;width:100%;height:100%;object-fit:cover}
/* case gallery: one group per project; each row shows its images whole at one height (columns sized by aspect ratio) */
.wg{margin-top:clamp(26px,3vw,36px)}
.wh{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:0 2px 12px;line-height:1.4}
.wh b{font-size:16px;font-weight:600}
.wh span{font-size:14px;color:var(--ink2)}
.wh small{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--ink3)}
.wr{display:grid;gap:12px;grid-template-columns:var(--c)}
.wr + .wr{margin-top:12px}
.wr figure{position:relative;margin:0;aspect-ratio:var(--a);border-radius:18px;overflow:hidden;background:var(--tile)}
.wr figure::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);pointer-events:none}
.wr img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:759px){.wr{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:8px}.wr + .wr{margin-top:8px}.wr .mf{grid-column:1/-1}.wr .dt{display:none}.wr figure{border-radius:14px}}
/* films: real video cards, tap to play (anon.py makes the files) */
.films{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.films{grid-template-columns:repeat(4,minmax(0,1fr))}}
.flm{position:relative;margin:0;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#1d1d1f}
.flm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flm .play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:2;width:52px;height:52px;border:0;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.88);color:var(--ink);cursor:pointer;box-shadow:0 10px 24px -12px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.flm .play svg{width:20px;height:20px;margin-left:3px}
.flm figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:48px 16px 14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));color:#fff;pointer-events:none}
.flm figcaption b{display:block;font-size:16px;font-weight:600;line-height:1.35}
.flm figcaption small{display:block;margin-top:2px;font-size:12px;line-height:1.4;opacity:.85}
.flm.on .play,.flm.on figcaption{display:none}
.flm.on video{object-fit:contain;background:#000}
@media(max-width:759px){.flm figcaption{padding:40px 10px 11px}.flm figcaption b{font-size:13px}.flm figcaption small{font-size:10.5px}}
.films + .foot-note + .plans{margin-top:16px}
/* feature visual with a muted live preview and a sound toggle */
.fv.pv{height:clamp(380px,36vw,440px)}
.fv.pv .vf{height:84%;transform:translateY(-12px);box-shadow:0 28px 50px -26px rgba(120,50,10,.55)}
.fv .vf video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fv .snd{position:absolute;right:10px;bottom:10px;z-index:2;width:34px;height:34px;border:0;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fv .snd svg{width:17px;height:17px}
.fv .snd .on,.fv .snd.on .off{display:none}
.fv .snd.on .on{display:inline}
/* landscape films (16:9) in their own row; the creator clip sits on the neutral panel */
.flm.w{aspect-ratio:16/9}
.films.wd{grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.films.wd{grid-template-columns:repeat(2,minmax(0,1fr))}}
.films + .films{margin-top:12px}
.fv.cool.pv .vf{box-shadow:0 28px 50px -26px rgba(0,0,0,.45)}
.fv.cool{background:linear-gradient(165deg,#E3E6EE 0%,#F6F7FA 55%,#DADEE8 100%)}
/* Client-specific page (kh): what we see, the same shelf, two films, dated steps */
.pth.nt{background:var(--tile);color:var(--ink2)}
.pth.nt li i{color:#C7C7CC}
.pth.nt li span b{color:var(--ink)}
.pth.nt .res{color:var(--ink2);border-top-color:#E3E3E8}
.fc .fs a,.vz-s a,.see + .foot-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line)}
.shelf{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.shelf{grid-template-columns:repeat(3,minmax(0,1fr))}}
.paths.see .pth{display:flex;flex-direction:column}
.paths.see .res{margin-top:auto}
.paths.see ul{margin-bottom:16px}
.fc{display:flex;flex-direction:column;background:var(--tile);border-radius:24px;padding:clamp(18px,2.2vw,26px)}
.fc .fn{font-size:clamp(19px,2vw,22px);font-weight:700;color:var(--ink);line-height:1.3}
.fc .fn small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--ink3)}
.fc .fk{margin-top:18px;font-size:12.5px;font-weight:600;color:var(--ink3)}
.fc .fb{margin-top:4px;font-size:clamp(22px,2.4vw,28px);font-weight:700;line-height:1.1;letter-spacing:-.01em;background:linear-gradient(180deg,#FF9147,#E2541A);-webkit-background-clip:text;background-clip:text;color:transparent}
.fc ul{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:8px;font-size:clamp(13.5px,1.4vw,15px);line-height:1.5;color:var(--ink2)}
.fc li{position:relative;padding-left:14px}
.fc li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--a1)}
.fc .fs{margin-top:auto;padding-top:16px;font-size:12px;color:var(--ink3);line-height:1.6}
/* two portrait films beside a stack of two landscape items, heights matched on wide screens */
.films.mix{grid-template-columns:repeat(2,minmax(0,1fr))}
.films.mix .stk{grid-column:1/-1;display:grid;gap:12px}
.stk .im{position:relative;margin:0;aspect-ratio:var(--a);border-radius:22px;overflow:hidden;background:#fff}
.stk .im::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);pointer-events:none}
.stk .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(min-width:760px){.films.mix{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr)}.films.mix .stk{grid-column:auto;grid-template-rows:repeat(2,minmax(0,1fr))}.films.mix .stk > *{aspect-ratio:auto}}
.films.mix + .wr{margin-top:12px}
@media(max-width:759px){.films.mix + .wr{margin-top:8px}}
.jr .tile .rl{display:block;margin-bottom:6px;font-size:12.5px;font-weight:600;color:var(--a-deep);letter-spacing:.02em}
.films.mix{margin-top:clamp(26px,3vw,36px)}
.wh + .films.mix{margin-top:0}
/* kh charts: category bars and a brand timeline (lanes on a shared time axis; a vertical list on narrow screens) */
.vzs{display:grid;gap:12px;margin-bottom:12px}
.vz{margin:0;background:var(--tile);border-radius:24px;padding:clamp(18px,2.4vw,28px)}
.vz figcaption b{display:block;font-size:clamp(15.5px,1.6vw,17px);font-weight:600;color:var(--ink);line-height:1.4}
.vz figcaption small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink3)}
.vz-bars{margin-top:18px;max-width:760px;display:flex;flex-direction:column;gap:12px}
.vz-row{display:grid;grid-template-columns:7.2em minmax(0,1fr);align-items:center;gap:12px;font-size:14px}
.vz-l{color:var(--ink2)}
.vz-row.on .vz-l{color:var(--ink);font-weight:600}
.vz-t{display:flex;align-items:center;gap:8px;min-width:0}
.vz-t i{flex:none;display:block;height:20px;width:calc((100% - 64px) * var(--p));border-radius:0 4px 4px 0;background:#BDBDC3}
.vz-row.on .vz-t i{background:#FF7A2F}
.vz-t em{font-style:normal;font-size:14px;font-weight:500;color:var(--ink2);white-space:nowrap}
.vz-row.on .vz-t em{font-weight:600;color:var(--ink)}
.vz-row:hover .vz-t i{filter:brightness(1.06)}
.vz-n{margin-top:16px;font-size:14px;color:var(--ink2);line-height:1.55}
.vz-s{margin-top:12px;font-size:12px;color:var(--ink3);line-height:1.6}
.vz-ax,.vz-tr .yl{display:none}
.vz-ln{margin-top:18px}
.vz-nm{font-size:15px;font-weight:600;color:var(--ink)}
.vz-tr{position:relative;margin-top:10px;padding-left:24px}
.vz-tr::before{content:"";position:absolute;left:5px;top:8px;bottom:12px;width:2px;background:var(--line)}
.vz-ev{position:relative;padding-bottom:12px}
.vz-ev i{position:absolute;left:-24px;top:4px;width:12px;height:12px;border-radius:50%;background:#FF7A2F;box-shadow:0 0 0 2px var(--tile)}
.vz-ev.vz-pj i{background:var(--tile);box-shadow:inset 0 0 0 2px #FF7A2F,0 0 0 2px var(--tile)}
.vz-ev p{font-size:13.5px;color:var(--ink2);line-height:1.5}
.vz-ev b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
@media(min-width:1000px){
  .vz.tl .vz-ax{display:grid;grid-template-columns:72px minmax(0,1fr);margin-top:16px}
  .vz-yr{position:relative;height:16px}
  .vz-yr span{position:absolute;left:var(--x);transform:translateX(-50%);font-size:12px;color:var(--ink3)}
  .vz.tl .vz-ln{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;margin-top:0}
  .vz.tl .vz-tr{height:156px;margin:0;padding:0}
  .vz.tl .vz-tr::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;margin-top:-1px}
  .vz.tl .vz-tr .yl{display:block;position:absolute;left:var(--x);top:0;bottom:0;width:1px;background:var(--line2)}
  .vz.tl .vz-ln + .vz-ln .vz-tr{border-top:1px solid var(--line2)}
  .vz.tl .vz-ev{position:absolute;left:var(--x);top:50%;width:0;height:0;padding:0}
  .vz.tl .vz-ev i{left:-6px;top:-6px}
  .vz.tl .vz-ev p{position:absolute;left:0;width:136px;transform:translateX(-50%);font-size:12.5px;line-height:1.42;text-align:center}
  .vz.tl .vz-ev.vz-u p{bottom:14px}
  .vz.tl .vz-ev.vz-d p{top:14px}
  .vz.tl .vz-ev.vz-l p{transform:translateX(-10px);text-align:left}
  .vz.tl .vz-ev.vz-r p{transform:translateX(calc(-100% + 10px));text-align:right}
}
@media(min-width:760px){.get.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.get.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* kh: website screenshots side by side at equal height; public-case notes beside films */
.shots{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin-bottom:12px}
@media(min-width:760px){.shots{grid-template-columns:minmax(0,1.566fr) minmax(0,1.804fr)}}
.shots figure{margin:0}
.shots img{display:block;width:100%;border-radius:18px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.shots figcaption{margin-top:8px;font-size:12.5px;color:var(--ink3)}
.films.mix .stk.one{display:flex;flex-direction:column}
.stk.one > *{flex:1 1 auto}
.films.pub + .feats,.films.pub + .get{margin-top:12px}
.tile.pt{display:flex;flex-direction:column;gap:10px}
.tile.pt .tk{font-size:12.5px;font-weight:600;color:var(--a-deep)}
.tile.pt h3{font-size:clamp(18px,1.9vw,21px);line-height:1.35}
.tile.pt p{font-size:clamp(14px,1.4vw,15px);line-height:1.6}
.tile.pt .vz-s{margin-top:auto;font-size:12px}
.pic9{position:relative;margin:0;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.pic9 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.pic9 figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 16px 14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));color:#fff}
.pic9 figcaption b{display:block;font-size:16px;font-weight:600;line-height:1.35}
.pic9 figcaption small{display:block;margin-top:2px;font-size:12px;line-height:1.4;opacity:.85}
@media(max-width:759px){.pic9 figcaption{padding:40px 10px 11px}.pic9 figcaption b{font-size:13px}.pic9 figcaption small{font-size:10.5px}}
.get + .feats{margin-top:14px}
/* Client-type case page (route.py): type cards, public case cards with numbers, our-work rows with a film, scope chips */
.rt-ts{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.rt-t{display:flex;flex-direction:column;gap:6px;padding:clamp(20px,2.2vw,26px);border-radius:24px;background:var(--tile);color:var(--ink);text-decoration:none;transition:background .2s}
.rt-t:hover{background:#ECECF0}
.rt-k{font-size:12.5px;font-weight:600;color:var(--a-deep);letter-spacing:.04em}
.rt-t h3{font-size:clamp(20px,2vw,23px);line-height:1.3}
.rt-wh{font-size:14px;color:var(--ink3)}
.rt-t dl{margin:10px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;font-size:14.5px;line-height:1.55}
.rt-t dt{font-size:12.5px;font-weight:600;color:var(--ink3);padding-top:2px;white-space:nowrap}
.rt-t dd{margin:0;color:var(--ink2)}
.rt-t dd:last-of-type{color:var(--ink);font-weight:500}
.rt-go{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--a-deep)}
.rt-go svg{width:14px;height:14px}
.rt-case{display:grid;gap:18px 32px;grid-template-columns:minmax(0,1fr);padding:clamp(22px,2.6vw,32px);border-radius:24px;background:var(--tile)}
.rt-nm{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.25}
.rt-nm small{font-size:14px;font-weight:500;color:var(--ink3)}
.rt-nm span{align-self:center;font-size:12px;font-weight:600;color:var(--ink2);background:#fff;border-radius:999px;padding:3px 10px}
.rt-st{margin-top:12px;font-size:clamp(15px,1.5vw,16px);line-height:1.7;color:var(--ink2)}
.rt-tk{margin-top:16px;padding-top:16px;border-top:1px solid #E3E3E8;font-size:clamp(15.5px,1.6vw,17px);font-weight:600;line-height:1.6;color:var(--a-deep)}
.rt-tk b{display:inline-block;margin:0 10px 6px 0;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(180deg,#FF9147,#FF6A1F);border-radius:999px;padding:2px 10px;vertical-align:2px}
.rt-r{display:flex;flex-direction:column;gap:16px}
.rt-n{display:flex;flex-direction:column;gap:2px;padding-bottom:14px;border-bottom:1px solid #E3E3E8}
.rt-n b{font-size:clamp(28px,3.2vw,38px);font-weight:600;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.rt-n span{font-size:13.5px;line-height:1.5;color:var(--ink2)}
.rt-m p{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;color:var(--ink2)}
.rt-m p b{font-size:clamp(28px,3.2vw,38px);font-weight:600;color:var(--a-deep);line-height:1.15;font-variant-numeric:tabular-nums}
.rt-bar{position:relative;height:10px;margin-top:8px;border-radius:999px;background:#DCDCE1;overflow:hidden}
.rt-bar i{position:absolute;top:0;bottom:0;left:0;width:var(--p);background:var(--a1);border-radius:999px}
.rt-bar i.hi{left:var(--l);width:calc(var(--r) - var(--l));background:#FFB98C;border-radius:0 999px 999px 0}
.rt-m small{display:block;margin-top:8px;font-size:12px;color:var(--ink3);line-height:1.5}
.rt-case .vz-s{grid-column:1/-1;margin-top:0}
.rt-case + .wg{margin-top:clamp(22px,2.6vw,30px)}
.rt-w .flm{aspect-ratio:9/16}
.rt-do{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:clamp(18px,2.2vw,24px)}
.rt-do b{margin-right:4px;font-size:14px;font-weight:600;color:var(--ink)}
.rt-do span{font-size:14px;color:var(--ink2);background:var(--tile);border-radius:999px;padding:6px 14px}
.paths.fork + .wg{margin-top:clamp(26px,3vw,36px)}
@media(max-width:759px){
.rt-w .flm{grid-column:auto}
.rt-w figure:not(.flm):not(.mf){aspect-ratio:auto}
.rt-ts{gap:10px}
.rt-sc{grid-template-columns:minmax(0,1fr)}
}
@media(min-width:760px){
.rt-ts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:900px){
.rt-case{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rt-case .rt-r{grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--k),minmax(0,1fr));gap:28px;padding-top:22px;border-top:1px solid #E3E3E8}
.rt-case .rt-n{padding-bottom:0;border-bottom:0}
}
@media(min-width:1100px){
.rt-ts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.rt-shot{margin:0}
.rt-fr{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 18px 40px -26px rgba(0,0,0,.4)}
.rt-bz{display:flex;gap:5px;padding:8px 10px;background:#E9E9EE}
.rt-bz i{width:7px;height:7px;border-radius:50%;background:#C4C4CA}
.rt-fr img{display:block;width:100%;height:auto}
.rt-shot figcaption{margin-top:8px;font-size:12px;color:var(--ink3)}
/* Two small service tiles share a row evenly once the website is folded into a full brand project */
@media(min-width:760px){.offer.two .of{grid-column:span 3}}

/* Biobor page: five-bear lineup in section 03 */
.kb-cast{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 10px;margin-top:8px}
.kb-cast figure{margin:0;flex:0 0 calc((100% - 20px)/3);text-align:center}
.kb-cast img{display:block;width:100%;height:auto;aspect-ratio:420/513}
.kb-cast figcaption{display:flex;flex-direction:column;gap:3px;margin:6px 10px 0;padding-top:9px;border-top:2px solid var(--c)}
.kb-cast b{font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--ink)}
.kb-cast span{font-size:13px;color:var(--ink2)}
.kb-cap{margin:14px 0 22px;text-align:center;font-size:12.5px;color:var(--ink3)}
@media(min-width:760px){.kb-cast{flex-wrap:nowrap;gap:16px;margin-top:28px}.kb-cast figure{flex:1 1 0}.kb-cap{margin-bottom:30px}}

/* Full project frame: every service inside it (pitch 01, Biobor page) */
.fp{border-radius:28px;padding:clamp(12px,1.8vw,20px);background:var(--a-soft);box-shadow:inset 0 0 0 1.5px var(--a-line)}
.fp-h{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:8px 8px 16px}
.fp-t{font-size:clamp(20px,2.2vw,24px);font-weight:700;color:var(--ink)}
.fp-h p{margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.fp-p{font-size:15px;font-weight:600;color:var(--a-deep)}
.fp .of:not(.big){background:#fff}
/* Main and support platforms (adaptive distribution) */
.adp{display:block;margin-top:12px}
.adp h3{font-size:clamp(18px,2vw,21px)}
.adp > p{margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--ink2)}
.adp-r{display:grid;gap:10px;margin-top:14px;grid-template-columns:minmax(0,1fr)}
.adp-r div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;background:#fff}
.adp-r b{font-size:15px;font-weight:600;color:var(--ink)}
.adp-r span{font-size:14px;line-height:1.55;color:var(--ink2)}
@media(min-width:760px){.adp-r{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Film groups: a text tile, then the films */
.fg{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.fg + .fg{margin-top:12px}
.fg-t{padding:18px 20px;border-radius:22px;background:var(--tile)}
.fg-t b{display:block;font-size:clamp(18px,2vw,22px);font-weight:700;color:var(--ink)}
.fg-t p{margin-top:6px;font-size:14px;line-height:1.6;color:var(--ink2)}
@media(min-width:760px){.fg{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}.fg-t{padding:24px 22px}}
.films.f3,.films.m1{grid-template-columns:repeat(3,minmax(0,1fr))}
.films.m1 .stk{grid-column:span 2;display:grid;gap:12px;grid-template-rows:repeat(2,minmax(0,1fr))}
.films.m1 .stk > *{aspect-ratio:auto}
@media(max-width:759px){.films.f3,.films.m1,.films.m1 .stk{gap:8px}.films.f3 .play,.films.m1 .play{width:42px;height:42px}}
.fg + .foot-note,.fg + .works{margin-top:14px}
.get + .plans{margin-top:12px}
@media(max-width:759px){.films.m1{grid-template-columns:repeat(2,minmax(0,1fr))}.films.m1 .stk{grid-column:auto}}

/* Biobor page: who we are, with a host slot for the greyhound IP */
.ab{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.ab-host{display:flex;flex-direction:column;gap:14px;padding:clamp(18px,2.4vw,28px);border-radius:24px;background:linear-gradient(160deg,#FFF1E7,#FFF9F5 60%,#FFFFFF);box-shadow:inset 0 0 0 1px var(--a-line)}
.ab-pic{display:grid;place-items:center;aspect-ratio:4/3;border-radius:18px;background:#fff;overflow:hidden}
.ab-pic img{width:62%;height:auto}
.ab-say{position:relative;padding:14px 16px;border-radius:16px;background:#fff;font-size:15px;line-height:1.6;color:var(--ink);box-shadow:0 10px 24px -18px rgba(0,0,0,.35)}
.ab-say::before{content:"";position:absolute;left:28px;top:-7px;width:14px;height:14px;background:#fff;transform:rotate(45deg)}
.ab-t{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.ab-t .rl{display:block;margin-bottom:6px;font-size:12.5px;font-weight:600;color:var(--a-deep);letter-spacing:.02em}
.ab-t h3{font-size:clamp(18px,2vw,21px)}
.ab-t p{margin-top:6px;font-size:14.5px;line-height:1.65;color:var(--ink2)}
@media(min-width:900px){.ab{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}}
/* Biobor page: what to watch on each shelf card */
.fc .fwt{margin-top:6px;font-size:clamp(13.5px,1.4vw,14.5px);line-height:1.55;color:var(--ink2)}
.shelf + .foot-note + .sub-t + .paths{margin-top:0}
.fg + .sub-t{margin-top:clamp(30px,4vw,44px)}
@media(min-width:900px){.ab-pic{flex:1;aspect-ratio:auto;min-height:240px}}
.fc .fb + .fk{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.fc .fk + ul{margin-top:8px;padding-top:0;border-top:0}
/* Biobor page: IP scenes (Rich 2026-10-26). Keyed on a class: in the single-file export img src is a data URI. */
.ab.ip .ab-pic{display:block;aspect-ratio:16/9;background:#F4EEE9}
.ab.ip .ab-pic img,.ip-pic img{display:block;width:100%;height:100%;object-fit:cover}
.ab.ip .ab-say{z-index:1;margin:-14px 10px 0;box-shadow:0 14px 30px -16px rgba(80,30,5,.35)}
.ab.ip .ab-say::before{left:46%}
.ip-pic{margin:0;overflow:hidden;border-radius:clamp(18px,2.2vw,24px);aspect-ratio:16/9;background:#F4EEE9}
.ip-st{display:grid;gap:clamp(16px,2.4vw,28px);grid-template-columns:minmax(0,1fr)}
.ip-end{max-width:820px;margin:clamp(24px,3.4vw,40px) auto clamp(8px,1.6vw,16px);box-shadow:0 30px 60px -40px rgba(120,50,10,.45)}
.ip-end + .contact{margin-top:clamp(18px,2.4vw,26px)}
@media(min-width:900px){
  .ab.ip{grid-template-columns:minmax(0,1fr)}
  .ab.ip .ab-pic{flex:none;aspect-ratio:2/1;min-height:0}
  .ab.ip .ab-pic img{object-position:50% 30%}
  .ab.ip .ab-say{margin:-40px 22px 0;font-size:16.5px;padding:16px 20px}
  .ab.ip .ab-t{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1024px){
  .ip-st{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}
  .ip-st .ip-pic{aspect-ratio:auto;min-height:100%}
  .ip-st .jr{grid-template-columns:minmax(0,1fr);align-content:center}
  .ip-st .jr::before{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto;background:linear-gradient(180deg,#FFE2CF,#FF7A2F)}
  .ip-st .js{grid-template-columns:44px 1fr;grid-template-rows:auto;justify-items:stretch;gap:14px}
}
.fp + .foot-note{margin-top:14px}
/* Biobor reference prices as a concept (2026-10-26 19:42): compact tiers, a recommended mix, no credit table */
.pk3{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.pk{display:flex;flex-direction:column;border-radius:20px;padding:20px 22px 22px;background:var(--tile)}
.pk-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:27px}
.pk h3{font-size:17px;line-height:1.3}
.pk-p{margin-top:10px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px}
.pk-p b{font-family:"Inter","Noto Sans SC",sans-serif;font-size:clamp(28px,3vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.pk-p span{font-size:14px;font-weight:500;color:var(--ink2)}
.pk-p small{flex-basis:100%;font-family:"Inter","Noto Sans SC",sans-serif;font-size:12.5px;color:var(--ink3)}
.pk-d{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.rec-tag{flex:none;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--grad);padding:4px 12px;border-radius:999px;line-height:1.4;box-shadow:0 6px 16px -6px rgba(255,106,31,.7)}
.pk.rec{background:#fff;box-shadow:inset 0 0 0 2px var(--a1),0 24px 50px -26px rgba(255,106,31,.6)}
.pk.rec .pk-p b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pk.corp{background:var(--ink)}
.pk.corp h3,.pk.corp .pk-p b{color:#fff}
.pk.corp .pk-p b{font-size:clamp(20px,2.2vw,24px);letter-spacing:0}
.pk.corp .pk-d{color:rgba(255,255,255,.7)}
.reco{margin-top:12px;border-radius:24px;padding:clamp(20px,2.6vw,30px);background:linear-gradient(160deg,#FFF1E7,#FFF9F5 60%,#FFFFFF);box-shadow:inset 0 0 0 1.5px var(--a-line)}
.reco-tag{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--grad);padding:5px 14px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(255,106,31,.7)}
.reco h3{margin-top:14px;font-size:clamp(18px,2vw,22px);line-height:1.4}
.reco-s{margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--ink2)}
.reco h3 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.reco-s b{color:var(--a-deep);font-weight:700}
.reco-p{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.reco-pk{font-size:13px;font-weight:600;color:var(--ink2);margin-right:2px}
.reco-p .chip{background:#fff;box-shadow:inset 0 0 0 1px var(--a-line);color:var(--a-deep)}
@media(min-width:760px){.pk3.three{grid-template-columns:repeat(3,minmax(0,1fr))}.pk3.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Biobor recommendation (2026-10-27): 进阶 reads as selected, its card opens into the panel below like a tab with soft
   inverted corners; one mix bar whose last segment is the free extra films */
.pk3.join .pk.rec{position:relative;z-index:2;background:#FFF1E7;border:2px solid var(--a1);border-bottom:0;padding:18px 20px 22px;border-radius:20px 20px 0 0;box-shadow:none}
.pk3.join{--jg:12px;row-gap:var(--jg)}
.pk3.join .pk.rec::after{content:"";position:absolute;left:-2px;right:-2px;top:100%;height:calc(var(--jg) + 2px);background:#FFF1E7;border-left:2px solid var(--a1);border-right:2px solid var(--a1)}
.pk3.join .pk.rec h3{display:flex;align-items:center;gap:8px}
.pk3.join .pk.rec h3::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4l3 3 5.8-6.6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat,var(--grad)}
.pk3.join .reco{position:relative;order:1;margin-top:0;border-radius:0 0 24px 24px;background:linear-gradient(180deg,#FFF1E7 0%,#FFF7F1 40%,#FFFFFF);box-shadow:inset 0 0 0 2px var(--a1),0 30px 60px -44px rgba(255,106,31,.5)}
.pk3.join .pk.corp{order:2}
.rmix-n{margin-top:20px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--a-deep)}
.rmix{margin-top:10px;display:grid;grid-template-columns:minmax(0,1fr);background:#fff;border-radius:22px;box-shadow:inset 0 0 0 1px var(--a-line),0 20px 44px -34px rgba(217,72,15,.45)}
.rmx{position:relative;display:flex;align-items:center;gap:12px;padding:20px 22px}
.rmx + .rmx{border-top:1px solid var(--a-line)}
.rmx + .rmx::before{content:"+";position:absolute;z-index:1;left:50%;top:0;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--a-line),0 6px 14px -6px rgba(217,72,15,.45);color:var(--a1);font:600 18px/28px "Inter",sans-serif;text-align:center}
.rmx > b{flex:none;font-family:"Inter","Noto Sans SC",sans-serif;font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.rmx.tv > b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rmx > span{font-size:15px;line-height:1.4;color:var(--ink)}
.rmx > span small{display:block;margin-top:3px;font-size:12.5px;color:var(--ink3)}
.rmx.gift{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;row-gap:10px;border-top:0;border-radius:0 0 22px 22px;padding-top:22px;background:radial-gradient(140% 120% at 100% 0%,#FFA66A 0%,rgba(255,166,106,0) 55%),linear-gradient(135deg,#FF8A3D 0%,#F26A1F 50%,#D9480F 100%);box-shadow:0 18px 36px -20px rgba(217,72,15,.8)}
.rmx.gift > b,.rmx.gift > span{color:#fff}
.rmx.gift > span small{color:rgba(255,255,255,.9)}
.gift-tag{grid-column:1/-1;justify-self:start;font-size:12.5px!important;font-weight:700;letter-spacing:.06em;line-height:1.4;color:var(--a-deep)!important;background:#fff;padding:3px 11px;border-radius:999px}
.gift-pct{position:absolute;top:-30px;right:12px;width:74px;height:74px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-8deg);box-shadow:0 10px 22px -10px rgba(140,40,0,.55),0 0 0 3px rgba(255,255,255,.55)}
.gift-pct b{font-family:"Inter","Noto Sans SC",sans-serif;font-size:17.5px;font-weight:800;letter-spacing:-.02em;line-height:1.05;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rmx.gift .gift-pct small{display:block;font-size:10px;font-weight:600;line-height:1.3;color:var(--a-deep)}
.rmix-f{margin-top:14px;font-size:13.5px;color:var(--ink2)}
@media(min-width:760px){
  .pk3.join{--jg:18px}
  .pk3.join .reco{border-radius:24px}
  .pk3.join .pk.corp{grid-column:3;grid-row:1}
  .pk3.join .reco{grid-column:1/-1;grid-row:2}
  /* inverted corners where the tab meets the panel: 18px boxes whose right/left edge sits on the tab border (columns are 12px apart) */
  .pk3.join .reco::before,.pk3.join .reco::after{content:"";position:absolute;z-index:3;top:-16px;box-sizing:border-box;width:18px;height:18px;border:0 solid var(--a1);background:transparent}
  .pk3.join .reco::before{left:calc(100% / 3 - 12px);border-right-width:2px;border-bottom-width:2px;border-bottom-right-radius:18px;box-shadow:8px 8px 0 8px #FFF1E7}
  .pk3.join .reco::after{left:calc(200% / 3 - 6px);border-left-width:2px;border-bottom-width:2px;border-bottom-left-radius:18px;box-shadow:-8px 8px 0 8px #FFF1E7}
  .rmix{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr)}
  .rmx{flex-direction:column;align-items:flex-start;gap:8px;padding:24px 26px}
  .rmx + .rmx{border-top:0;border-left:1px solid var(--a-line)}
  .rmx + .rmx::before{left:0;top:50%}
  .gift-pct{top:-18px;right:14px;width:82px;height:82px}
  .gift-pct b{font-size:18px}
  .rmx.gift{grid-template-columns:minmax(0,1fr);align-content:start;row-gap:8px;border-left:0;border-radius:0 22px 22px 0;padding-top:24px}
}
/* one line bridging the meeting's "about 15 shorts" to the new mix (2026-10-27) */
.pk-note{margin:-2px 0 14px;padding:11px 16px;border-radius:14px;background:var(--a-soft);font-size:14px;line-height:1.65;color:var(--ink2)}
.pk-note b{display:inline-block;margin-right:10px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--a-deep)}
.pk-note em{font-style:normal;font-weight:600;color:var(--a-deep)}