/* ================================================================
   MIKARO STUDIO · PRODUCT SHOWCASE PAGES
   Shared by /teakhouse, /praow and their Thai counterparts.
   Prefix .sc-* · nothing here leaks into the rest of the site.
   ================================================================ */


/* ---------- hero ---------- */
.sc-hero{padding:clamp(2.6rem,7vh,4.6rem) 0 clamp(1.4rem,4vh,2.4rem);text-align:center}
.sc-hero .wrap{max-width:62rem}
.sc-hero h1{font-family:var(--disp);font-weight:900;letter-spacing:-.03em;line-height:1.05;font-size:clamp(2.4rem,6vw,4.6rem);margin:1rem 0;overflow:visible;padding:.06em 0 .1em}
.sc-hero h1 .bl{color:var(--blue)}
.sc-hero h1 .pk{color:var(--pink)}
.sc-hero h1 .gd{color:#9A6B12}
.sc-lead{color:var(--sub);font-size:clamp(1rem,1.6vw,1.15rem);max-width:44rem;margin:0 auto}
.sc-lead b{color:var(--ink)}
.sc-feat{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:50rem;margin:1.3rem auto 0}
.sc-feat span{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--disp);font-weight:700;font-size:.8rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem .95rem;line-height:1.2}
.sc-feat span i{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:0 0 auto}
.sc-feat span:nth-child(2n) i{background:var(--pink)}
.sc-feat span:nth-child(3n) i{background:var(--gold)}
.sc-feat span:nth-child(4n) i{background:#0E8A6D}
.sc-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:1.7rem}
.sc-ctas .btn{font-size:1rem;padding:.95rem 1.9rem}
.sc-note{margin-top:1rem;font-size:.8rem;color:var(--sub)}
.sc-note b{color:var(--ink)}

/* ---------- section rhythm ---------- */
/* content-visibility keeps the browser from laying out sections that are still
   off-screen. On a catalogue this long that is the difference between a ~2.6s
   and a ~0.6s first layout pass · Thai text shaping makes it matter most there.
   `auto` on contain-intrinsic-size makes the browser remember each section's
   real height after its first render, so scrolling back never shifts. */
.sc-sec{padding:0 0 clamp(3.6rem,9vh,6rem);content-visibility:auto;contain-intrinsic-size:auto 1200px}
.sc-sec:target,.sc-sec.first{content-visibility:visible}
.sc-sec.first{padding-top:clamp(1.4rem,4vh,2.4rem)}
/* darker gold for heading accents · var(--gold) is 1.83:1 on the milk canvas.
   The [lang] attribute keeps this ahead of main.css's html[lang="th"] rule. */
html[lang] .sc-sec .shead h2 .gd,html[lang] .sc-hero h1 .gd{color:#9A6B12}

/* ---------- browser frame for screenshots ---------- */
.sc-frame{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.sc-frame .bar{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--milk)}
.sc-frame .bar i{width:10px;height:10px;border-radius:50%;background:#E4DED4;flex:0 0 auto}
.sc-frame .bar i:nth-child(1){background:#FF6058}.sc-frame .bar i:nth-child(2){background:#FFBE2E}.sc-frame .bar i:nth-child(3){background:#2ACB42}
.sc-frame .bar .url{margin-left:.6rem;font-size:.72rem;font-weight:600;color:var(--sub);background:#fff;border:1px solid var(--line);border-radius:999px;padding:.28rem .8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sc-frame img{width:100%;height:auto;display:block}
.sc-cap{margin-top:.7rem;font-size:.8rem;color:var(--sub);text-align:center}
.sc-cap b{color:var(--ink);font-weight:700}

/* one framed screenshot, centred */
.sc-shot{max-width:880px;margin:0 auto clamp(1.6rem,4vw,2.4rem)}
.sc-shot.wide{max-width:1040px}

/* two framed screenshots side by side */
.sc-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,2.6vw,1.6rem);align-items:start;margin:0 auto clamp(1.6rem,4vw,2.4rem);max-width:1120px}
@media(max-width:820px){.sc-pair{grid-template-columns:1fr}}
.sc-pair>*{min-width:0}

/* a single phone-sized shot */
.sc-phone{max-width:330px;margin:0 auto clamp(1.6rem,4vw,2.4rem)}

/* phone-sized shots · narrower so they never balloon */
.sc-phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:clamp(1rem,2.6vw,1.6rem);max-width:620px;margin:0 auto clamp(1.6rem,4vw,2.4rem)}
@media(min-width:560px){.sc-phones{grid-template-columns:1fr 1fr}}
.sc-phones>*{min-width:0}

/* ---------- two worlds ---------- */
.sc-worlds{display:grid;grid-template-columns:1fr auto 1fr;gap:1.2rem;align-items:center}
.sc-world .lbl{display:flex;align-items:center;gap:.5rem;font-family:var(--disp);font-weight:800;font-size:.82rem;letter-spacing:.02em;margin-bottom:.7rem}
.sc-world .lbl .d{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.sc-world.a .lbl .d{background:var(--pink)}
.sc-world.b .lbl .d{background:var(--blue)}
.sc-swap{width:56px;height:56px;flex:0 0 auto;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow)}
.sc-swap svg{width:24px;height:24px}
@media(max-width:820px){
  .sc-worlds{grid-template-columns:1fr;gap:.9rem}
  .sc-swap{transform:rotate(90deg);margin:.1rem auto}
}

/* ---------- catalogue list ---------- */
.sc-list{max-width:58rem;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0 1.8rem;list-style:none;padding:0}
@media(max-width:640px){.sc-list{grid-template-columns:1fr}}
.sc-list .it{display:flex;align-items:flex-start;gap:.65rem;min-width:0;padding:.72rem .2rem;border-top:1px solid var(--line);font-size:.95rem;line-height:1.5}
.sc-list .it:first-child{border-top:0}
@media(min-width:641px){.sc-list .it:nth-child(2){border-top:0}}
/* the tick is a background image, not ~250 inline <svg> nodes · on a catalogue
   this long the node count is what the first style+layout pass is paying for */
.sc-list .it::before{content:"";width:19px;height:19px;flex:0 0 auto;margin-top:.15rem;background:no-repeat center/19px 19px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8A6D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.sc-list .it b{color:var(--ink);font-weight:700}

/* ---------- money math ---------- */
.sc-math{max-width:52rem;margin:0 auto;background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(1.9rem,4.5vw,3rem);text-align:center;font-size:clamp(1.05rem,2.1vw,1.32rem);line-height:1.62}
.sc-math b{color:var(--mint);font-weight:800}
.sc-math .huge{display:block;font-family:var(--disp);font-weight:900;letter-spacing:-.02em;font-size:clamp(1.7rem,4.5vw,2.6rem);line-height:1.12;margin-bottom:.9rem}

/* ---------- not-included card ---------- */
.sc-notinc{max-width:44rem;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(1.5rem,3.5vw,2.2rem)}
.sc-notinc h3{font-family:var(--disp);font-weight:800;font-size:1.1rem;margin-bottom:.3rem}
.sc-notinc .sub{font-size:.85rem;color:var(--sub);margin-bottom:1rem}

/* ---------- deployment band ---------- */
.sc-deploy{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(2.4rem,6vw,4rem);text-align:center;overflow:hidden;position:relative}
.sc-deploy .pill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.sc-deploy h2{font-family:var(--disp);font-weight:900;letter-spacing:-.025em;line-height:1.08;font-size:clamp(1.9rem,4.6vw,3.2rem);margin:1rem 0 .8rem}
.sc-deploy h2 .mint{color:var(--mint)}
.sc-deploy p{color:rgba(255,248,240,.8);max-width:42rem;margin:0 auto}
.sc-deploy p b{color:#fff}
.sc-deploy .price{font-family:var(--disp);font-weight:900;color:var(--mint)}
.sc-deploy .sc-ctas{margin-top:1.7rem}
.sc-deploy .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.sc-deploy .btn-ghost:hover{background:#fff;color:var(--ink)}

/* ---------- what's inside ---------- */
.sc-inside{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:1.2rem;align-items:start}
@media(max-width:900px){.sc-inside{grid-template-columns:1fr}}
.sc-panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(1.5rem,3.5vw,2.2rem)}
.sc-panel h3{font-family:var(--disp);font-weight:800;font-size:1.1rem;margin-bottom:.3rem}
.sc-panel .sub{font-size:.82rem;color:var(--sub);margin-bottom:1.1rem}
.sc-cols{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.6rem}
@media(max-width:560px){.sc-cols{grid-template-columns:1fr}}
.sc-li{display:flex;align-items:flex-start;gap:.6rem;padding:.42rem 0;font-size:.9rem;border-top:1px solid var(--line)}
.sc-li:first-child,.sc-cols .sc-li:nth-child(2){border-top:0}
.sc-li::before{content:"";width:18px;height:18px;flex:0 0 auto;margin-top:.12rem;background:no-repeat center/18px 18px}
.sc-li.yes::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8A6D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.sc-li.no{color:var(--sub)}
.sc-li.no::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF3D8F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.sc-stack{margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.5rem}
.sc-stack span{font-family:var(--disp);font-weight:700;font-size:.76rem;color:var(--ink);background:var(--milk);border:1px solid var(--line);border-radius:999px;padding:.42rem .85rem}

/* ---------- mobile sticky CTA · appears after the first screen, hides at the footer ---------- */
.sc-sticky{position:fixed;left:0;right:0;bottom:0;z-index:180;display:none;gap:.5rem;align-items:center;
  padding:.5rem .6rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom));
  background:rgba(255,248,240,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -14px 34px -22px rgba(23,21,31,.55);
  transform:translateY(115%);visibility:hidden;
  transition:transform .3s var(--ease),visibility 0s linear .3s;pointer-events:none}
.sc-sticky.on{transform:none;visibility:visible;transition:transform .3s var(--ease);pointer-events:auto}
.sc-sticky .btn{flex:1 1 0;min-width:0;justify-content:center;gap:.35rem;font-size:.84rem;
  padding:.78rem .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-sticky .btn-line{background:#06C755;color:var(--ink);box-shadow:0 12px 24px -14px rgba(6,199,85,.75)}
.sc-sticky .btn-line:hover{background:#05B34C;color:var(--ink)}
@media(max-width:820px){
  .sc-sticky{display:flex}
  body.sticky-on .mika-fab{transform:translateY(-62px)}
}
@media(prefers-reduced-motion:reduce){.sc-sticky{transition:none}}
html[lang="th"] .sc-sticky .btn{font-size:.82rem}

/* ---------- faq ---------- */
.sc-faq{max-width:48rem;margin:0 auto;display:flex;flex-direction:column;gap:.7rem}
.sc-q{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.sc-q summary{list-style:none;cursor:pointer;padding:1.05rem 1.3rem;font-family:var(--disp);font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sc-q summary::-webkit-details-marker{display:none}
.sc-q summary .pl{width:20px;height:20px;flex:0 0 auto;position:relative;transition:transform .3s var(--ease)}
.sc-q summary .pl::before,.sc-q summary .pl::after{content:"";position:absolute;background:var(--blue);border-radius:2px}
.sc-q summary .pl::before{top:9px;left:2px;width:16px;height:2px}
.sc-q summary .pl::after{top:2px;left:9px;width:2px;height:16px;transition:transform .3s var(--ease)}
.sc-q[open] summary .pl::after{transform:scaleY(0)}
.sc-q .ans{padding:0 1.3rem 1.15rem;color:var(--sub);font-size:.92rem;line-height:1.6}
.sc-q .ans b{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.sc-q summary .pl,.sc-q summary .pl::after{transition:none}}

/* ---------- overflow guards · nothing may exceed the viewport ---------- */
.sc-sec .wrap,.sc-hero .wrap{max-width:1280px}
.sc-frame,.sc-frame img{max-width:100%}
.sc-deploy,.sc-math,.sc-notinc,.sc-shot,.sc-pair,.sc-phones{overflow-wrap:break-word}
.sc-list .it span,.sc-li span{min-width:0;overflow-wrap:anywhere}

/* ================================================================
   SALES-PAGE QA · fail-open, static reveals.
   Every block is visible and settled from first paint · no scroll
   reveal, word-split or parallax transform can shift one element
   over another at any scroll position or width. Mirrors the site's
   prefers-reduced-motion behaviour, made the default here.
   ================================================================ */
.rv,.rv-l,.rv-r,.rv-s{opacity:1!important;transform:none!important}
.clipin{clip-path:none!important;transition:none!important}
[data-sp]{transform:none!important}
.wsplit .wu{overflow:visible!important}
.wsplit .wu i{transform:none!important;transition:none!important;margin:0!important}

/* ---------- Thai typography · looser leading for tone marks ---------- */
html[lang="th"] .sc-hero h1,html[lang="th"] .sc-sec .shead h2,html[lang="th"] .sc-deploy h2{line-height:1.28;letter-spacing:0}
html[lang="th"] .sc-list .it,html[lang="th"] .sc-li{line-height:1.7}
html[lang="th"] .sc-math{line-height:1.75}
html[lang="th"] .sc-q summary{line-height:1.5}