/* Approved Flow Studio UI: professional editorial hierarchy, real evidence, one offer.
   Shared by homepage, offer and case pages; no framework or animation dependency. */
.studio-ui {
  --paper:#f5f2e9; --paper-2:#eae5d8; --card:#fdfbf6; --card-2:#fffdf8;
  --ink:#222a26; --ink-2:#4d5750; --ink-3:#626a60; --line:#d5d9cc; --line-2:#bac3b6;
  --pine:#164f43; --pine-deep:#103e34; --pine-soft:#e2eae1;
  --signal:#b18a49; --signal-soft:#eae0c8; --signal-deep:#806337;
  --f-display:"Noto Serif HK","Songti TC","Songti SC",Georgia,serif;
  --f-body:"PingFang HK","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --shadow:0 8px 24px -20px #173c32; --r:16px; --r-lg:20px;
  color-scheme:light; line-height:1.8;
}
.studio-ui::before,.studio-ui .glow {display:none}
.studio-ui * {scroll-margin-top:110px}
.studio-ui a,.studio-ui button,.studio-ui summary {touch-action:manipulation;-webkit-tap-highlight-color:rgba(22,79,67,.12)}
.studio-ui a {text-underline-offset:4px}
.studio-ui :focus-visible {outline:3px solid var(--pine);outline-offset:5px}
.studio-ui .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.studio-ui h1,.studio-ui h2,.studio-ui h3 {text-wrap:balance;letter-spacing:-.035em}
.studio-ui .rv {opacity:1;transform:none;filter:none;will-change:auto;transition:none}
.studio-ui .nav-wrap {padding:16px 24px}
.studio-ui .nav {width:100%;max-width:1092px;justify-content:space-between;padding:8px 10px 8px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(253,251,246,.97);box-shadow:0 8px 24px -24px #173c32;backdrop-filter:none}
.studio-ui .nav .links {margin-left:auto}
.studio-ui .nav .links a {padding:10px 12px;min-height:44px;font-size:14px}
.studio-ui .nav .nav-wa {min-height:44px;border-radius:9px}
.studio-ui .brand .g {font-family:Georgia,serif;font-size:19px;letter-spacing:-.035em}
.studio-ui .brand .yr {font:11px var(--f-body);border:0;padding:0;color:var(--ink-3)}
.studio-ui .burger {width:48px;height:48px;border-radius:10px}
.studio-ui .burger span {left:14px;width:20px}
.studio-ui .burger span:nth-child(1) {top:17px}
.studio-ui .burger span:nth-child(2) {top:23px}
.studio-ui .burger span:nth-child(3) {top:29px}
.studio-ui.menu .burger span:nth-child(1),.studio-ui.menu .burger span:nth-child(3) {top:23px}
.studio-ui .overlay {padding:112px max(24px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-bottom));background:var(--paper);backdrop-filter:none;overflow-y:auto;overscroll-behavior:contain;transition:opacity .18s ease,visibility .18s ease}
.studio-ui .overlay a {transform:none;transition:none;line-height:1.5;font-size:32px}
.studio-ui.menu {overflow:hidden}
.studio-ui .btn-wa {min-height:50px;padding:15px 22px;font-size:15px;line-height:1.4;border-radius:10px;box-shadow:none;transition:background .18s ease,transform .18s ease;will-change:auto}
.studio-ui .btn-wa:hover {transform:translateY(-1px)}
.studio-ui .btn-wa.ghost {box-shadow:none;padding:14px 0;min-height:48px}
.studio-ui .plain-links {gap:12px 24px;margin:18px 0 0;font-size:14px}
.studio-ui .plain-links a {display:inline-flex;align-items:center;min-height:44px}
.studio-ui .eyebrow,.studio-ui .record-label,.studio-ui .sidx .l {font-family:var(--f-body);font-size:13px;font-weight:650;letter-spacing:.08em;line-height:1.6}
.studio-ui .eyebrow {margin-bottom:24px;color:var(--pine)}
.studio-ui .eyebrow b {background:var(--signal);width:6px;height:6px}
.studio-ui .section {padding:84px 0}
.studio-ui .shead h2 {font-size:clamp(28px,3.1vw,40px);line-height:1.4}
.studio-ui .shead p {line-height:1.85;max-width:60ch;font-size:16px}
.studio-ui .sidx .n {font-family:Georgia,serif;font-size:30px;font-weight:400;color:var(--signal-deep)}
.studio-ui .sidx {margin-bottom:20px}
/* Home hero: real text evidence, never a recreated AI interface. */
.site-home .hero {padding:156px 0 76px;margin:0;min-height:0;border-radius:0;box-shadow:none;overflow:visible}
.site-home .hero::after {display:none}
.site-home .hero-grid {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.site-home .hero-copy {max-width:none;min-width:0;z-index:auto}
.site-home .hero h1 {font-size:clamp(36px,4.2vw,53px);line-height:1.45;max-width:none;margin:0 0 20px;transform:none;animation:none;font-weight:700;letter-spacing:-.045em}
.site-home .hero h1 .a {white-space:normal}
.site-home .hero .tag {font-size:18px;line-height:1.9;max-width:32em;font-weight:400}
.site-home .hero .eyebrow,.site-home .hero .tag,.site-home .hero .cta-row {opacity:1;transform:none;animation:none}
.site-home .hero .cta-row {margin-top:20px}
.site-home .hero .hero-note {font-size:13px;margin:12px 0;color:var(--ink-2);line-height:1.8}
.hero-price {display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.hero-price b {font:600 29px/1.3 Georgia,serif;letter-spacing:-.025em;color:var(--pine)}
.hero-price span {font-size:13px;color:var(--ink-3)}
.citation-card {position:relative;padding:28px;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--pine);border-radius:3px 3px 18px 18px;box-shadow:0 24px 50px -40px #164f4366;min-width:0}
.citation-meta {display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-3)}
.citation-prompt {padding:18px 0;margin:20px 0 0;border-top:1px solid var(--line);font-size:17px;line-height:1.8;color:var(--ink)}
.citation-prompt>span {display:block;font-size:12px;color:var(--ink-3);margin-bottom:5px;letter-spacing:.08em}
.citation-answer {padding:22px;border-radius:10px;background:var(--pine-soft)}
.citation-card h2 {font:600 clamp(24px,2.5vw,32px)/1.3 Georgia,serif;color:var(--pine);margin:12px 0}
.citation-card blockquote {font-size:16px;margin:0;color:var(--ink);line-height:1.9}
.citation-answer .record-label {font-size:11px;color:var(--ink-2);letter-spacing:.04em}
.citation-source {display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding:16px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.citation-source a {font-size:14px;font-weight:650;color:var(--pine)}
.citation-caveat {font-size:12px;color:var(--ink-3);line-height:1.8;margin:16px 0 4px}
.text-link {display:inline-flex;gap:8px;align-items:center;min-height:44px;font-size:14px;font-weight:650;color:var(--pine);text-decoration:underline}
/* Evidence cards: a readable result is always in HTML, even when an image is included. */
.studio-ui .evidence-section {border-top:1px solid var(--line);padding-top:52px!important}
.studio-ui .proof-grid {gap:28px;margin:32px 0}
.studio-ui .proof-card {padding:28px;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px}
.case-heading {position:relative;padding-right:25px}
.case-index {position:absolute;right:0;top:0;font:22px Georgia,serif;color:var(--signal-deep)}
.studio-ui .case-heading h3 {font-family:var(--f-display);font-size:32px;font-weight:650;line-height:1.4;margin:12px 0 4px;letter-spacing:-.025em}
.studio-ui .case-heading p {font-size:16px;margin:0 0 24px;color:var(--ink-2)}
.answer-preview {padding:22px;background:var(--paper);border-radius:10px;flex:1}
.preview-label {font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink-3);display:block}
.studio-ui .buyer-query {font-size:16px;line-height:1.7;color:var(--ink);margin:12px 0 18px;font-weight:650}
.answer-preview figure {margin:0 0 18px}
.answer-preview figure a {display:block;border-radius:7px}
.answer-preview img {display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:7px}
.answer-preview figcaption {font-size:11px;line-height:1.7;color:var(--ink-3);margin-top:8px}
.studio-ui .answer-preview blockquote {font-family:var(--f-display);font-size:clamp(21px,2.4vw,27px);line-height:1.8;margin:24px 0;padding:2px 0 2px 18px;border-left:2px solid var(--signal);color:var(--pine)}
.studio-ui .answer-summary {font-size:15px;line-height:1.9;color:var(--ink);margin:16px 0 0}
.source-chip {display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding:16px 0 0;margin-top:24px;color:var(--ink-2);font-size:12px}
.studio-ui .proof-card>.proof-note {font-size:12px;margin:18px 0 8px;line-height:1.8}
.case-link {display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;margin-top:auto;font-size:14px;font-weight:700}
.studio-ui .self-proof {background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:26px;margin:28px 0 20px}
.studio-ui .self-proof h3 {font-size:26px;color:var(--pine);margin:8px 0}
.studio-ui .self-proof p,.studio-ui .self-proof .record-label {color:var(--ink-2)}
.studio-ui .self-proof a,.studio-ui .self-proof summary {color:var(--pine)!important}
.studio-ui .self-proof .table-scroll caption {color:var(--ink-2)}
.studio-ui .self-proof details {border-color:var(--line);margin-top:16px;padding-top:8px}
.studio-ui .self-proof summary {min-height:48px;font-size:14px;padding:12px 0}
.studio-ui .proof-note {font-size:13px;line-height:1.85}
/* Method and consultant use an editorial grid instead of four decorative images. */
.studio-ui .method-steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.studio-ui .method-steps .guide {background:none;border-radius:0;border:0;border-top:2px solid var(--line-2);padding:24px 0 0;box-shadow:none;min-width:0}
.studio-ui .method-steps .gi {padding:0;background:none;box-shadow:none}
.studio-ui .method-steps .gnum {font:600 13px var(--f-body);color:var(--pine)}
.studio-ui .method-steps h3 {font-size:22px;line-height:1.5;margin:16px 0 12px}
.studio-ui .method-steps p {font-size:14px;line-height:1.9;color:var(--ink-2)}
.studio-ui .about {border-radius:0;box-shadow:none;padding:0;border-top:1px solid var(--line)}
.studio-ui .about>.ai {padding:40px 0 0;background:none;box-shadow:none;border-radius:0}
.studio-ui .about h2 {line-height:1.45;font-size:clamp(28px,3.1vw,40px)}
.studio-ui .founder {padding-top:30px;border-top:1px solid var(--line);margin-top:36px}
.studio-ui .f-portrait {border-radius:12px}
.studio-ui .case {background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:none;margin-top:28px}
.home-offer {display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:32px;background:var(--pine-soft);border-radius:14px;margin:30px 0}
.home-offer h3 {font-family:var(--f-display);font-size:28px;line-height:1.5;margin:10px 0}
.home-offer p {font-size:14px;line-height:1.8;color:var(--ink-2);margin:12px 0}
.home-offer-price {padding-left:36px;border-left:1px solid var(--line-2)}
.home-offer-price>span {font-size:13px;color:var(--ink-2)}
.home-offer-price strong {display:block;font:600 38px/1.4 Georgia,serif;color:var(--pine);margin:6px 0}
.studio-ui .achip:hover,.studio-ui .csit:hover,.studio-ui .offer:hover {transform:none}
.studio-ui .faq-list {max-width:none}
.studio-ui .faq summary {font-size:17px;padding:22px 0;line-height:1.65}
.studio-ui .faq .a {font-size:16px;padding:0 0 22px;line-height:1.9;max-width:70ch}
.studio-ui .lead-block {padding:0;border-radius:16px;box-shadow:none}
.studio-ui .lead-in {border-radius:16px;background:var(--pine);box-shadow:none}
.studio-ui .lead-in::after {display:none}
.studio-ui .lead-block h2 {line-height:1.5}
.studio-ui .lead-in .btn-wa {background:var(--card);color:var(--pine);border:1px solid transparent}
.studio-ui .lead-in .btn-wa:hover {background:var(--pine-soft)}
.studio-ui .lead-in a:focus-visible {outline-color:var(--card)}
.studio-ui .wa-fab {right:max(18px,env(safe-area-inset-right));bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));min-height:48px;border-radius:12px;padding:12px 16px;font-size:13px;box-shadow:0 6px 22px -12px #164f43;transition:background .18s ease,transform .18s ease}
.studio-ui .wa-fab .wai {fill:none;stroke:currentColor}
.studio-ui .wa-fab .fab-txt {display:inline}
.studio-ui .wa-fab:hover {transform:translateY(-1px)}
.studio-ui .wa-fab:focus-visible {outline:3px solid var(--signal-deep)}
.studio-ui footer {margin-top:60px;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.studio-ui footer a {display:inline-flex;align-items:center;min-height:44px}
/* Offer: one decisive, bounded service. */
.site-services .service-hero {display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;padding:152px 0 64px}
.site-services .service-intro {min-width:0}
.site-services .service-hero h1 {font-size:clamp(34px,4.6vw,56px);line-height:1.45;margin:0 0 22px;font-weight:700}
.site-services .service-hero h1 .hl {color:var(--pine);display:inline;white-space:normal}
.site-services .service-hero h1 .hl::after {display:none}
.site-services .service-hero .tag {font-size:18px;line-height:1.9;font-weight:400}
.sprint-summary {padding:30px;border:1px solid var(--line);border-top:3px solid var(--pine);border-radius:3px 3px 16px 16px;background:var(--card);min-width:0}
.sprint-price {font:600 45px/1.2 Georgia,serif;letter-spacing:-.04em;color:var(--pine);margin:12px 0}
.payment-note {font-size:13px;color:var(--ink-2);margin:0}
.studio-ui .sprint-summary .cta-row {margin:22px 0 12px}
.studio-ui .sprint-summary .btn-wa {width:100%;justify-content:center}
.studio-ui .sprint-summary .hero-note {font-size:12px;line-height:1.8}
.summary-includes {list-style:none;padding:18px 0 0;margin:18px 0 12px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.summary-includes li {position:relative;padding-left:18px;margin:8px 0}
.summary-includes li::before {content:"";width:5px;height:5px;background:var(--pine);position:absolute;left:0;top:.8em;border-radius:50%}
.summary-limit {font-size:12px;color:var(--ink-3);margin:8px 0 0}
.studio-ui .offers {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.studio-ui .offer {padding:24px;border-radius:12px;border-color:var(--line);background:var(--card)}
.studio-ui .offer.feat {border-color:var(--pine)}
.studio-ui .offer .op {font-size:28px;line-height:1.5;margin:8px 0}
.studio-ui .offer li {font-size:15px;line-height:1.8}
.studio-ui .offer .ometa {font-family:var(--f-body);font-size:13px;line-height:1.8}
.studio-ui .offer .ogain {font-size:14px;line-height:1.9;background:var(--paper);padding:16px}
.studio-ui .csit {cursor:default;border-radius:10px}
.studio-ui .csit .go::after {display:none}
.studio-ui .record-hero {padding-top:140px!important}
.studio-ui .record-body {max-width:880px}
.studio-ui .record-body h2 {font-family:var(--f-display)}
.studio-ui .record-facts {padding:24px;background:var(--card);border:1px solid var(--line);border-radius:12px}
@media(max-width:1050px){
 .studio-ui .brand .yr{display:none}.studio-ui .nav{gap:8px}.studio-ui .nav .links a{padding:10px 9px;font-size:13px}
 .site-home .hero-grid,.site-services .service-hero{gap:36px}
 .site-home .hero h1{font-size:42px}
}
@media(max-width:900px){
 .studio-ui .nav .links,.studio-ui .nav .nav-wa{display:none}.studio-ui .burger{display:block}
 .site-home .hero-grid,.site-services .service-hero{grid-template-columns:minmax(0,1fr);gap:32px}
 .site-home .hero{padding-top:124px}.site-home .hero h1{font-size:46px}
 .site-home .hero-copy{max-width:660px}.citation-card{max-width:640px;width:100%}
 .site-services .service-hero{padding-top:126px}.sprint-summary{max-width:640px;width:100%}
 .studio-ui .method-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .studio-ui .proof-grid{gap:20px}.studio-ui .proof-card{padding:22px}.answer-preview{padding:18px}
}
@media(max-width:640px){
 .studio-ui main{padding:0 20px;width:100%;min-width:0}
 .studio-ui .nav-wrap{padding:10px 12px}.studio-ui .nav{padding:4px 6px 4px 14px;border-radius:12px;gap:8px}
 .studio-ui .brand .g{font-size:18px}.studio-ui .brand .mark{width:24px;height:24px}
 .studio-ui .eyebrow{font-size:12px;margin-bottom:18px;letter-spacing:.04em}
 .site-home .hero{padding:116px 0 42px}
 .site-home .hero h1{font-size:32px;line-height:1.55;margin:0 0 20px;letter-spacing:-.05em}
 .site-home .hero .tag,.site-services .service-hero .tag{font-size:16px;line-height:1.9}
 .site-home .hero .hero-note{font-size:12px}
 .hero-price{margin-top:22px;gap:8px}.hero-price b{font-size:28px}.hero-price span{font-size:12px}
 .site-home .hero .cta-row{margin-top:18px}.site-home .hero .cta-row .btn-wa{width:100%;justify-content:center;font-size:14px}
 .studio-ui .plain-links{gap:8px 20px;margin-top:8px;font-size:13px}
 .citation-card{padding:22px}.citation-prompt{font-size:16px;margin-top:16px;padding:16px 0}.citation-answer{padding:18px}.citation-card blockquote{font-size:15px}
 .citation-meta{font-size:11px}.citation-meta .record-label{font-size:12px}.citation-card h2{font-size:27px}
 .studio-ui .section{padding:56px 0}.studio-ui .shead h2{font-size:28px;line-height:1.5}.studio-ui .shead p{font-size:15px}
 .studio-ui .evidence-section{padding-top:34px!important}.studio-ui .proof-grid{grid-template-columns:1fr;margin:24px 0}
 .studio-ui .proof-card{padding:22px}.studio-ui .case-heading h3{font-size:29px}.studio-ui .case-heading p{font-size:15px}
 .studio-ui .answer-preview blockquote{font-size:24px}.studio-ui .self-proof{padding:22px}.studio-ui .self-proof h3{font-size:24px}
 .studio-ui .method-steps{grid-template-columns:1fr;gap:20px}.studio-ui .method-steps .guide{padding-top:18px}.studio-ui .method-steps h3{font-size:22px;margin:10px 0}.studio-ui .method-steps p{font-size:15px}
 .studio-ui .founder{gap:22px}.studio-ui .f-portrait{max-width:180px}
 .home-offer{grid-template-columns:1fr;gap:24px;padding:24px}.home-offer h3{font-size:25px}.home-offer-price{padding:20px 0 0;border-left:0;border-top:1px solid var(--line-2)}
 .studio-ui .faq summary{font-size:16px}.studio-ui .faq .a{font-size:15px}
 .site-services .service-hero{padding:110px 0 42px!important;gap:24px}
 .site-services .service-hero h1{font-size:32px;line-height:1.35;margin-bottom:14px}
 .site-services .service-hero .hero-note{font-size:12px;line-height:1.8;margin:10px 0}
 .site-services .service-intro .plain-links{display:none}
 .sprint-summary{padding:22px}.sprint-price{font-size:38px;margin:10px 0}.payment-note{font-size:12px}
 .studio-ui .sprint-summary .cta-row{margin:16px 0 10px}
 .studio-ui .sprint-summary .btn-wa{font-size:14px;padding:14px 12px}
 .studio-ui .offers{grid-template-columns:1fr}.studio-ui .offer{padding:22px}
 .studio-ui .record-hero{padding-top:112px!important}.studio-ui .record-hero h1{font-size:32px;line-height:1.5}
 .studio-ui .record-body{padding:12px 0 40px}.studio-ui .record-facts{padding:20px}
 .studio-ui .wa-fab{right:max(12px,env(safe-area-inset-right));bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px));font-size:12px;gap:8px;padding:10px 13px;border-radius:10px;min-height:48px}
 .studio-ui footer{margin-top:30px}.studio-ui .lead-in{padding:28px 24px}
}
@media(prefers-reduced-motion:reduce){
 .studio-ui *,.studio-ui *::before,.studio-ui *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{.studio-ui .nav-wrap,.studio-ui .overlay,.studio-ui .wa-fab{display:none}.studio-ui .hero,.studio-ui .phero{padding-top:0!important}}

.studio-ui .wa-fab[hidden]{display:none}