/* Approved content system. Hero geometry and typography stay in hero-transfer.css. */
:root {
  --nav-height:76px;
  --ui-ease:cubic-bezier(.19,1,.22,1);
  --grid-line:rgb(80 70 52 / 7%);
  --grid-fade-height:100svh;
  --grid-fade-width:30.2vw;
  --grid-fade-origin:55% 100%;
}
/* The left 55% stays clear; the fade narrows toward the orange diagonal. */
.page-grid,.transfer-hero::before,.section-nav {
  background-image:
    conic-gradient(at var(--grid-fade-origin),transparent 0deg,var(--paper) atan2(var(--grid-fade-width),var(--grid-fade-height)),var(--paper) 180deg,transparent 180deg),
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:100% 100%,32px 32px,32px 32px;
  background-position:0 0;
}
.page-grid {
  position:fixed;
  min-height:0;
  opacity:1;
  mask-image:none;
  -webkit-mask-image:none;
}
.transfer-hero::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  --grid-fade-height:min(48.8vw,760px,calc(100svh - 120px));
}
.section-nav {
  background-color:var(--paper);
  background-size:100vw 100svh,32px 32px,32px 32px;
  background-attachment:fixed;
}
@media(max-width:600px) {
  .transfer-hero::before {
    --grid-fade-origin:57% calc(100% - 44px);
    --grid-fade-width:29vw;
    --grid-fade-height:calc(min(125vw,68svh) + 12px);
  }
}
.works-shell { width:min(calc(100% - 48px),840px); min-height:0; padding-bottom:0; }
.section-nav { min-height:76px; margin:0; gap:0; border:0; }
.section-nav .section-wordmark { display:none; flex:none; font-size:26px; }
.section-nav.is-stuck .section-wordmark { display:block; padding-right:26px; margin-right:26px; border-right:1px solid var(--line); }
.nav-track,.section-nav.is-stuck .nav-track { justify-content:space-between; gap:26px; padding-inline:2px; overflow-x:auto; scrollbar-width:none; }
.nav-track::-webkit-scrollbar { display:none; }
.section-nav .nav-tab { font-size:20px; padding:20px 0; min-height:76px; line-height:1.2; }
.nav-tab,.nav-tab span { transition:color .6s var(--ui-ease),transform .6s var(--ui-ease); }
.section-nav .nav-tab::after { content:none; }
.nav-tab span { position:relative; isolation:isolate; }
.nav-tab span::after { content:''; position:absolute; z-index:-1; bottom:.03em; left:-2%; width:104%; height:.32em; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ui-ease); }
.nav-tab[aria-selected=true] span::after { transform:scaleX(1); }
.nav-tab[aria-selected=true]:hover span { transform:none; }
.panel { padding:40px 0 70px; }
.panel-heading { margin-bottom:30px; }
.panel-heading h2 { font:400 clamp(62px,15.7cqw,132px)/1.12 var(--display); letter-spacing:-.025em; }
.ui-media { display:block; position:relative; overflow:hidden; isolation:isolate; background:#e6e3dc; }
.ui-media::before { content:''; position:absolute; width:100%; aspect-ratio:3/2; top:50%; left:50%; transform:translate(-50%,-50%); background-image:url('ui-media/editorial-atlas.png'); background-size:200% 200%; background-position:0 0; transition:transform .8s var(--ui-ease); }
.ui-media--workshop::before { background-position:100% 0; }
.ui-media--editing::before { background-position:0 100%; }
.ui-media--community::before { background-position:100% 100%; }
.ui-media--wechill::before,.ui-media--molkt::before,.ui-media--bot::before,.ui-media--covers::before { background-image:url('ui-media/product-atlas.png'); }
.ui-media--molkt::before { background-position:100% 0; }
.ui-media--bot::before { background-position:0 100%; }
.ui-media--covers::before { background-position:100% 100%; }
.profile-about-media { aspect-ratio:1.5; }
[data-card] { position:relative; transition:transform .45s var(--ui-ease),border-color .7s var(--ui-ease),box-shadow .7s var(--ui-ease); }
.ui-arrow { display:inline-grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:var(--orange); font-size:0; vertical-align:middle; transition:transform .6s var(--ui-ease),background-color .5s var(--ui-ease); }
.ui-arrow::before { content:''; width:18px; height:18px; background:#fff; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h14v14h-4V10.83L5.83 21 3 18.17 13.17 8H6Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.catalog-card-title,.profile-service-title,.profile-community-title { max-width:100%; background-image:linear-gradient(var(--orange),var(--orange)); background-repeat:no-repeat; background-position:0 72%; background-size:0 36%; transition:background-size .6s var(--ui-ease); }
.profile-service-title { background-position:0 78%; background-size:0 34%; transition-duration:.7s; }
[data-card]:focus-visible .ui-arrow { background:var(--ink); }
[data-card]:focus-visible :is(.catalog-card-title,.profile-community-title) { background-size:100% 42%; }
[data-card]:focus-visible .profile-service-title { background-size:100% 40%; }
@media(hover:hover) and (pointer:fine) {
  [data-card]:hover { transform:translateY(-5px); border-color:#c9c5bc; box-shadow:0 3px 6px #0000000a,0 26px 48px -18px #0000002e; }
  [data-card]:hover .ui-media::before { transform:translate(-50%,-50%) scale(1.04); }
  [data-card]:hover .ui-arrow { background:var(--ink); transform:translate(2px,-2px); }
  [data-card]:hover :is(.catalog-card-title,.profile-community-title) { background-size:100% 42%; }
  [data-card]:hover .profile-service-title { background-size:100% 40%; }
}
.panel-enter { animation:ui-panel-in .9s var(--ui-ease); }
.ui-reveal { opacity:0; translate:0 30px; transition:opacity 1.3s var(--ui-ease),translate 1.3s var(--ui-ease),transform .45s var(--ui-ease),border-color .7s var(--ui-ease),box-shadow .7s var(--ui-ease); }
.ui-reveal.is-visible { opacity:1; translate:0 0; }
@keyframes ui-panel-in { from { opacity:0; transform:translateY(24px); } }
.catalog-card-copy { padding:16px 10px 30px; }
.catalog-card-title { line-height:1.2; }
.catalog-card > .ui-arrow { position:absolute; right:18px; bottom:18px; }
.catalog-product-card--wide .catalog-card-copy { padding:16px 30px 16px 0; }
.catalog-product-card--wide .catalog-card-title { font-family:inherit; font-weight:750; font-size:30px; }
.catalog-writing-grid { grid-template-columns:1fr; }
.catalog-writing-card { display:grid; grid-template-columns:1fr 190px; align-items:center; min-height:145px; padding:12px 14px 12px 24px; gap:24px; }
.catalog-writing-card .ui-media { grid-column:2; grid-row:1; aspect-ratio:1.65; }
.catalog-writing-card .catalog-card-copy { grid-column:1; grid-row:1; padding:0 0 24px; }
.catalog-writing-card .catalog-card-title { font-family:inherit; font-size:25px; font-weight:700; }
.catalog-writing-card > .ui-arrow { left:24px; right:auto; bottom:22px; }
.profile-service-card { grid-template-columns:minmax(0,1.16fr) minmax(0,1fr); gap:22px; }
.profile-services-list { gap:28px; }
.profile-service-title { font-size:40px; font-weight:800; letter-spacing:-.025em; }
.profile-service-price { font-size:20px; margin-top:12px; }
.profile-service-copy { padding:12px 4px 12px 16px; }
.profile-service-card .profile-card-action { margin-top:22px; }
.profile-community-card { padding:28px; min-height:290px; }
.profile-community-title { font-size:30px; }
.profile-community-price { font-size:40px; margin-block:20px 8px; }
.profile-community-price small { font-size:16px; }
.profile-community-description { margin-top:0; }
/* Native modal: focus trapping, Escape and top-layer rendering supplied by the browser. */
.ui-dialog { width:min(840px,calc(100% - 48px)); max-width:none; max-height:calc(100svh - 64px); padding:0; border:1px solid #dedbd3; border-radius:18px; color:var(--ink); background:#fcfbf7; box-shadow:0 28px 90px #00000026; overflow:hidden; }
.ui-dialog[open] { animation:ui-dialog-in .52s var(--ui-ease); }
.ui-dialog::backdrop { background:rgb(20 20 20 / 34%); backdrop-filter:blur(8px); animation:ui-backdrop-in .28s ease; }
.dialog-frame { display:flex; flex-direction:column; max-height:calc(100svh - 66px); }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 32px; border-bottom:1px solid var(--line); flex:none; }
.dialog-header h2 { font-size:32px; line-height:1.3; font-weight:800; letter-spacing:-.025em; }
.dialog-close { width:38px; height:38px; display:grid; place-items:center; flex:none; border:1px solid var(--line); border-radius:50%; font:300 28px/1 sans-serif; }
.dialog-close:hover { background:#efede6; }
.dialog-body { overflow-y:auto; overscroll-behavior:contain; padding:28px 32px 32px; }
.detail-copy { font-size:17px; line-height:1.85; }
.detail-copy p+p,.detail-copy ul+p { margin-top:18px; }
.detail-copy strong { font-size:36px; letter-spacing:-.04em; }
.detail-topics { padding-left:22px; margin:14px 0 0; }
.detail-topics li { padding-left:4px; margin-block:10px; }
.detail-topics li::marker { color:var(--orange); }
.detail-cover { width:100%; aspect-ratio:2.8; border-radius:10px; margin-top:28px; }
.dialog-footer { display:flex; justify-content:flex-end; gap:12px; padding:18px 32px; border-top:1px solid var(--line); flex:none; }
.ui-button { display:inline-flex; justify-content:center; align-items:center; gap:12px; border:1px solid var(--line); padding:12px 22px; border-radius:999px; min-height:46px; font-size:16px; font-weight:650; }
.ui-button:hover { border-color:#99958d; }
.ui-button--primary { color:#fff; background:var(--ink); border-color:var(--ink); }
.ui-button--primary:hover { background:#33312e; }
.payment-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:30px; align-items:center; }
.payment-methods { display:flex; justify-content:center; gap:6px; margin:0 auto 12px; }
.payment-method { min-height:34px; padding:6px 14px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font-size:14px; transition:color .25s ease,background-color .25s ease,border-color .25s ease; }
.payment-method[aria-pressed=true] { color:#fff; background:var(--ink); border-color:var(--ink); font-weight:700; }
.payment-qr-viewport { width:100%; aspect-ratio:1; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; }
.payment-qr-track { display:flex; width:200%; height:100%; transform:translateX(0); transition:transform .25s ease; }
.payment-qr-track.is-wechat { transform:translateX(-50%); }
.payment-qr-track > .qr-image { flex:0 0 50%; width:50%; height:100%; aspect-ratio:auto; border:0; border-radius:0; }
.qr-placeholder { aspect-ratio:1; border:1px dashed #c8c3b8; border-radius:12px; background:#f4f2eb; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; color:var(--muted); }
.qr-placeholder svg { width:50px; height:50px; stroke:var(--orange); fill:none; stroke-width:1.2; }
.payment-amount { font-size:40px; line-height:1.2; font-weight:750; text-align:center; margin-top:18px; letter-spacing:-.045em; }
.payment-amount small { font-size:16px; font-weight:400; letter-spacing:0; color:var(--muted); margin-left:7px; }
.payment-copy h3 { font-size:30px; line-height:1.3; margin:0 0 16px; }
.payment-copy p { font-size:16px; line-height:1.85; color:#67645f; }
.copy-remark { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; padding:18px; margin:22px 0 14px; border:1px solid var(--ink); border-radius:10px; font-size:16px; font-weight:650; }
.copy-remark small { font-size:13px; color:var(--muted); font-weight:400; white-space:nowrap; }
.payment-copy .payment-note { font-size:16px; font-weight:700; color:var(--ink); }
.contact-placeholder { max-width:280px; margin:24px auto 0; }
.qr-image { display:block; width:100%; aspect-ratio:1; object-fit:contain; border:1px solid var(--line); border-radius:12px; background:#fff; }
.contact-qr { max-width:280px; margin:24px auto 0; }
@keyframes ui-dialog-in { from { opacity:0; transform:translateY(22px) scale(.97); } }
@keyframes ui-backdrop-in { from { opacity:0; } }
/* Direct-follow cursor, matching Oil's arrow geometry with our orange interaction ring. */
.ui-cursor { position:fixed; inset:auto; top:0; left:0; width:26px; height:26px; margin:0; padding:0; border:0; background:transparent; overflow:visible; pointer-events:none; z-index:2147483647; opacity:0; }
.ui-cursor::backdrop { display:none; }
.ui-cursor.is-visible { opacity:1; }
.ui-cursor-arrow,.ui-cursor-ring { position:absolute; top:0; left:0; transition:opacity .2s cubic-bezier(.33,1,.68,1),scale .2s cubic-bezier(.33,1,.68,1); }
.ui-cursor-arrow { width:22px; height:22px; filter:drop-shadow(0 1px 2px #0002); }
.ui-cursor-ring { width:26px; height:26px; border:1.5px solid var(--orange); border-radius:50%; background:rgb(242 55 25 / 5%); translate:-50% -50%; opacity:0; scale:.7; }
.ui-cursor.is-interactive .ui-cursor-arrow { opacity:0; scale:.7; }
.ui-cursor.is-interactive .ui-cursor-ring { opacity:1; scale:1; }
@media(pointer:fine) and (prefers-reduced-motion:no-preference) { html.has-ui-cursor,html.has-ui-cursor * { cursor:none!important; } }
@media(max-width:600px) {
  :root { --nav-height:64px; }
  .works-shell { width:calc(100% - 40px); }
  .section-nav { min-height:64px; }
  .section-nav .nav-tab { min-height:64px; font-size:18px; padding-block:17px; }
  .section-nav.is-stuck .section-wordmark { font-size:18px; padding-right:14px; margin-right:14px; }
  .nav-track,.section-nav.is-stuck .nav-track { gap:25px; padding-right:14px; justify-content:flex-start; }
  .panel { padding:28px 0 48px; }
  .panel-heading { margin-bottom:26px; }
  .panel-heading h2 { font-size:clamp(52px,20cqw,82px); line-height:1.1; }
  .catalog-card-title { font-size:32px; }
  .catalog-product-card--wide .catalog-card-copy { padding:14px 8px 30px; }
  .catalog-writing-card { grid-template-columns:1fr 100px; min-height:130px; padding:14px; gap:12px; }
  .catalog-writing-card .catalog-card-title { font-size:20px; }
  .catalog-writing-card > .ui-arrow { left:14px; bottom:18px; }
  .profile-service-card { grid-template-columns:1fr; gap:10px; }
  .profile-services-list { gap:20px; }
  .profile-service-copy { padding:14px 8px 10px; }
  .profile-service-title { font-size:29px; }
  .profile-service-card .profile-card-action { margin-top:18px; }
  .profile-community-card { min-height:270px; padding:24px; }
  .profile-community-title { font-size:29px; }
  .ui-dialog { width:calc(100% - 24px); max-height:calc(100svh - 24px); border-radius:14px; }
  .dialog-frame { max-height:calc(100svh - 26px); }
  .dialog-header { padding:20px; gap:14px; }
  .dialog-header h2 { font-size:25px; }
  .dialog-body { padding:22px 20px; }
  .dialog-footer { padding:14px 20px; gap:10px; }
  .ui-button { padding:12px 18px; font-size:15px; }
  .detail-copy { font-size:16px; }
  .detail-cover { aspect-ratio:1.8; }
  .payment-layout { grid-template-columns:1fr; gap:28px; }
  .payment-code { width:100%; max-width:280px; margin:auto; }
  .payment-copy h3 { font-size:26px; }
  .payment-amount { font-size:36px; }
}
@media(prefers-reduced-motion:reduce) {
  .ui-reveal { opacity:1; translate:none; }
  .ui-cursor { display:none; }
  .payment-method,.payment-qr-track { transition:none; }
  [data-card]:hover,.nav-tab:hover span { transform:none; }
  [data-card]:hover .ui-media::before { transform:translate(-50%,-50%); }
}