/* ============================================================
   DAAISTUDIO — Marketing Pages Stylesheet
   Used by: services, pricing, process, free-proposal, about,
            faq, contact, bilingual-website, blog  (th / en / jp)
   Loads AFTER project.css — inherits header, menu, footer,
   cursor, breadcrumb, .sec-label, .reveal, and all tokens.
   ============================================================ */

/* --- Page shell --- */
.page-wrap{max-width:1200px;margin:0 auto;padding:0 48px}
.page-sec{padding:88px 0;border-bottom:1px solid var(--line);position:relative}
.page-sec:last-of-type{border-bottom:none}

/* ── Rhythm ───────────────────────────────────────────────────────────
   These pages were a single column of text on one flat background. A
   full-bleed tinted band on alternating sections gives the scroll a
   pulse without adding ornament. Content stays on the same grid. */
.page-sec.band{
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
  background:#f1efeb;border-bottom-color:transparent}
.page-sec.band + .page-sec{border-top:1px solid var(--line)}
@media(max-width:768px){.page-sec.band{padding-inline:20px}}

/* dark band — for the one or two moments that should stop the eye */
.page-sec.dark{
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
  background:var(--ink);border-bottom-color:transparent}
.page-sec.dark .sec-h2,.page-sec.dark .f-h,.page-sec.dark .care-h,.page-sec.dark .step-h{color:#f7f6f4}
.page-sec.dark .sec-intro,.page-sec.dark .f-p,.page-sec.dark .step-b,.page-sec.dark .cmp-note{color:rgba(247,246,244,.62)}
.page-sec.dark .sec-intro strong{color:#f7f6f4}
.page-sec.dark .sec-label{color:rgba(247,246,244,.5)}
.page-sec.dark .sec-label::before{background:var(--navy)}
.page-sec.dark .f-grid,.page-sec.dark .care-grid{background:rgba(247,246,244,.14);border-color:rgba(247,246,244,.14)}
.page-sec.dark .f-cell,.page-sec.dark .care-card{background:var(--ink)}
.page-sec.dark .f-cell:hover{background:#191919}
/* the brand bronze only reaches 3.55:1 on #111 — lift it for small text on dark */
.page-sec.dark .f-n,.page-sec.dark .care-tag,.page-sec.dark .step-n,.page-sec.dark .step-when,
.page-sec.dark .answer-box strong{color:#a08a5e}
.page-sec.dark .sec-label::before,.page-sec.dark #scrollbar{background:#a08a5e}
/* FAQ inside a dark band inherited --ink on --ink and was invisible */
.page-sec.dark .faq-list{border-top-color:rgba(247,246,244,.16)}
.page-sec.dark .faq-item{border-bottom-color:rgba(247,246,244,.16)}
.page-sec.dark .faq-q{color:#f7f6f4}
.page-sec.dark .faq-q:hover{color:#a08a5e}
.page-sec.dark .faq-q::before,.page-sec.dark .faq-q::after{background:#f7f6f4}
.page-sec.dark .faq-a-in{color:rgba(247,246,244,.72)}
.page-sec.dark .faq-a-in strong{color:#f7f6f4}
/* price cards keep a light surface inside a dark band — restore their palette
   so the dark-section colours do not bleed onto a near-white card */
.page-sec.dark .price-card .price-name,.page-sec.dark .price-card .price-amt{color:var(--ink)}
.page-sec.dark .price-card .price-flag{color:var(--navy)}
.page-sec.dark .price-card .price-for,.page-sec.dark .price-card .price-unit{color:var(--muted)}
.page-sec.dark .price-card .price-list li{color:var(--ink);border-top-color:var(--line)}
.page-sec.dark .price-card .price-list li.off{color:var(--muted)}
.page-sec.dark .price-card .btn{border-color:var(--ink);color:var(--ink)}
.page-sec.dark .price-card .btn::before{background:var(--ink)}
.page-sec.dark .price-card .btn:hover{color:#f7f6f4}
.page-sec.dark .price-card .btn-solid{background:var(--navy);border-color:var(--navy);color:#fff}
.page-sec.dark .price-card .btn-solid:hover{color:#fff}
.page-sec.dark .price-grid{background:rgba(247,246,244,.14);border-color:rgba(247,246,244,.14)}
.page-sec.dark .chk li{color:rgba(247,246,244,.85);border-bottom-color:rgba(247,246,244,.16)}
.page-sec.dark .answer-box{background:rgba(247,246,244,.06);border-left-color:#a08a5e}
.page-sec.dark .answer-box p{color:rgba(247,246,244,.8)}
.page-sec.dark .cmp{background:transparent}
.page-sec.dark .cmp th{background:rgba(247,246,244,.08);color:rgba(247,246,244,.6)}
.page-sec.dark .cmp td{color:rgba(247,246,244,.78);border-color:rgba(247,246,244,.14)}
.page-sec.dark .cmp td:first-child{color:#f7f6f4}
.page-sec.dark .cmp .hi{color:#a08a5e}
.page-sec.dark .cmp-wrap{border-color:rgba(247,246,244,.16)}
.page-sec.dark .why-cta-btn,.page-sec.dark .btn{border-color:rgba(247,246,244,.3);color:#f7f6f4}
.page-sec.dark .btn::before{background:#f7f6f4}
.page-sec.dark .btn:hover{color:var(--ink)}
/* "not in this package" rows: readable text, with the distinction carried by
   the strike and the marker rather than by fading the copy out */
.price-list li.off{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(17,17,17,.28)}
.price-list li.off::before{background:#b4b4b4}
.page-sec.dark .care-amt{color:#f7f6f4}
.page-sec.dark .care-for,.page-sec.dark .price-for{color:rgba(247,246,244,.62)}
.page-sec.dark .care-amt small{color:rgba(247,246,244,.55)}
.page-sec.dark .care-list li{color:rgba(247,246,244,.8);border-top-color:rgba(247,246,244,.14)}
.page-sec.dark .steps{border-top-color:rgba(247,246,244,.14)}
.page-sec.dark .step{border-bottom-color:rgba(247,246,244,.14)}
@media(max-width:768px){.page-sec.dark{padding-inline:20px}}


/* remaining dark-band coverage: prose, plain lists, links and the stamp */
.page-sec.dark .prose,.page-sec.dark .prose p,.page-sec.dark .prose li{color:rgba(247,246,244,.82)}
.page-sec.dark .prose strong{color:#f7f6f4}
.page-sec.dark .prose li::before{background:#a08a5e}
.page-sec.dark .prose a,.page-sec.dark .sec-intro a,.page-sec.dark .faq-a-in a{color:#a08a5e;border-bottom-color:rgba(160,138,94,.45)}
.page-sec.dark .stamp{color:rgba(247,246,244,.55);border-top-color:rgba(247,246,244,.16)}
.page-sec.dark .rel-grid{background:rgba(247,246,244,.14);border-color:rgba(247,246,244,.14)}
/* .rel-card keeps a light surface inside a dark band — keep its own palette */
.page-sec.dark .rel-card{background:var(--bg)}
.page-sec.dark .rel-card:hover{background:#f1efeb}
.page-sec.dark .rel-card .f-n{color:var(--muted)}
.page-sec.dark .rel-card .rel-h{color:var(--ink)}
.page-sec.dark .rel-card:hover .rel-h{color:var(--navy)}
.page-sec.dark .rel-card .rel-p{color:var(--muted)}

/* ── Scroll progress ── */
#scrollbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--navy);z-index:400;transition:width .1s linear}

/* ── Hover behaviour ──────────────────────────────────────────────────
   Cards were static. A hairline that draws in from the left on hover
   reads as considered rather than decorative. */
.f-cell,.rel-card,.offer-card,.price-card{position:relative}
.f-cell::after,.rel-card::after,.offer-card::after{
  content:'';position:absolute;left:0;top:0;height:2px;width:0;background:var(--navy);transition:width .45s cubic-bezier(.76,0,.24,1)}
.f-cell:hover::after,.rel-card:hover::after,.offer-card:hover::after{width:100%}
.rel-card,.offer-card,.f-cell{transition:background .25s,transform .45s cubic-bezier(.76,0,.24,1)}
.rel-card:hover,.offer-card:hover{transform:translateY(-3px)}
.rel-h{transition:color .25s}
.rel-card:hover .rel-h{color:var(--navy)}
.rel-card .rel-h::after{content:' →';opacity:0;margin-left:0;transition:opacity .3s,margin-left .3s}
.rel-card:hover .rel-h::after{opacity:1;margin-left:6px}
.price-card{transition:box-shadow .4s,transform .45s cubic-bezier(.76,0,.24,1)}
.price-card:hover{transform:translateY(-4px);box-shadow:0 18px 50px -30px rgba(17,17,17,.45)}
.cmp tbody tr{transition:background .2s}
.cmp tbody tr:hover{background:#f1efeb}
.page-sec.dark .cmp tbody tr:hover{background:rgba(247,246,244,.06)}

/* ── Section counter ── */
.sec-label{counter-increment:sec}
.page-wrap{counter-reset:sec}

/* --- Page hero --- */
.page-hero{max-width:1200px;margin:0 auto;padding:28px 48px 72px}
.page-h1{font-size:clamp(38px,5.6vw,76px);font-weight:300;line-height:1.08;letter-spacing:-.03em;margin-bottom:26px;max-width:16em}
.page-lead{font-size:19px;font-weight:300;line-height:1.85;color:var(--ink);max-width:34em}
.page-lead strong{font-weight:500;color:var(--navy)}
.page-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.page-meta span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding:7px 14px;border:1px solid var(--line);border-radius:2px}

/* --- Section heading --- */
.sec-h2{font-size:clamp(26px,3.4vw,44px);font-weight:300;letter-spacing:-.025em;line-height:1.15;margin-bottom:20px;max-width:18em}
.sec-intro{font-size:17px;font-weight:300;line-height:1.9;color:var(--muted);max-width:40em;margin-bottom:44px}
.sec-intro strong{font-weight:500;color:var(--ink)}

/* --- Body prose --- */
.prose{font-size:17px;font-weight:300;line-height:1.95;color:var(--ink);max-width:42em}
.prose p{margin-bottom:20px}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:500}
.prose ul{list-style:none;margin:20px 0}
.prose li{padding-left:20px;position:relative;margin-bottom:12px;line-height:1.85}
.prose li::before{content:'';position:absolute;left:0;top:.75em;width:7px;height:1px;background:var(--navy)}

/* --- Answer box (GEO: direct answer up top) --- */
.answer-box{background:#f1efeb;border-left:2px solid var(--navy);padding:30px 34px;margin:36px 0;max-width:44em}
.answer-box p{font-size:17px;font-weight:300;line-height:1.9;color:var(--ink);margin-bottom:14px}
.answer-box p:last-child{margin-bottom:0}
.answer-box strong{font-weight:500;color:var(--navy)}

/* --- Pricing cards --- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px}
.price-card{background:var(--bg);padding:44px 34px;display:flex;flex-direction:column;position:relative}
.price-card.featured{background:#f1efeb}
.price-flag{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);margin-bottom:18px;display:block;min-height:14px}
.price-name{font-size:20px;font-weight:400;letter-spacing:-.01em;margin-bottom:8px}
.price-for{font-size:14px;font-weight:300;color:var(--muted);line-height:1.7;margin-bottom:28px;min-height:3.4em}
.price-amt{font-size:clamp(34px,4.2vw,48px);font-weight:300;letter-spacing:-.03em;color:var(--navy);line-height:1;margin-bottom:6px}
.price-unit{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:30px;display:block}
.price-list{list-style:none;flex:1;margin-bottom:32px}
.price-list li{font-size:14px;font-weight:300;line-height:1.7;color:var(--ink);padding:11px 0 11px 18px;border-top:1px solid var(--line);position:relative}
.price-list li::before{content:'';position:absolute;left:0;top:1.55em;width:7px;height:1px;background:var(--navy)}
/* superseded by the accessible values above */

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:16px 30px;border:1px solid var(--ink);color:var(--ink);position:relative;overflow:hidden;transition:color .3s}
.btn::before{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.76,0,.24,1)}
.btn:hover{color:var(--bg)}
.btn:hover::before{transform:scaleX(1)}
.btn span{position:relative;z-index:1}
.btn-solid{background:var(--navy);border-color:var(--navy);color:#f7f6f4}
.btn-solid::before{background:var(--ink)}
.btn-solid:hover{color:#f7f6f4}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* --- Comparison table (GEO: AI extracts tables first) --- */
.cmp-wrap{overflow-x:auto;margin-top:20px;border:1px solid var(--line)}
.cmp{width:100%;border-collapse:collapse;min-width:680px;background:var(--bg)}
.cmp th,.cmp td{text-align:left;padding:18px 22px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);font-size:14px;font-weight:300;line-height:1.7;vertical-align:top}
.cmp th{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400;background:#f1efeb}
.cmp td:first-child{font-weight:500;color:var(--ink)}
.cmp tr:last-child td{border-bottom:none}
.cmp th:last-child,.cmp td:last-child{border-right:none}
.cmp .hi{color:var(--navy);font-weight:500}
.cmp-note{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:14px}

/* --- Numbered step list --- */
.steps{display:flex;flex-direction:column;margin-top:20px;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:78px 1fr 1fr;gap:36px;padding:38px 0;border-bottom:1px solid var(--line);align-items:start}
.step-n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--navy);padding-top:6px}
.step-h{font-size:clamp(19px,2.2vw,26px);font-weight:400;letter-spacing:-.015em;line-height:1.3;margin-bottom:10px}
.step-when{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.step-b{font-size:15px;font-weight:300;line-height:1.9;color:var(--muted)}
.step-b ul{list-style:none;margin-top:14px}
.step-b li{padding-left:18px;position:relative;margin-bottom:9px;line-height:1.75}
.step-b li::before{content:'';position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--navy)}

/* --- Feature / value grid --- */
.f-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px}
.f-grid.two{grid-template-columns:repeat(2,1fr)}
.f-cell{background:var(--bg);padding:38px 32px;transition:background .25s}
.f-cell:hover{background:#f1efeb}
.f-n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--navy);margin-bottom:16px;display:block}
.f-h{font-size:17px;font-weight:500;letter-spacing:-.01em;margin-bottom:12px;line-height:1.4}
.f-h a{color:var(--navy);text-decoration:none;transition:opacity .2s}
.f-h a:hover{opacity:.65}
.f-p{font-size:14px;font-weight:300;line-height:1.85;color:var(--muted)}
.f-p a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(123,105,68,.35)}

/* --- Care plan cards --- */
.care-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px}
.care-card{background:var(--bg);padding:44px 38px}
.care-tag{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);margin-bottom:16px;display:block}
.care-h{font-size:22px;font-weight:400;letter-spacing:-.015em;margin-bottom:10px}
.care-for{font-size:14px;font-weight:300;color:var(--muted);line-height:1.75;margin-bottom:26px}
.care-amt{font-size:clamp(26px,3vw,34px);font-weight:300;color:var(--navy);letter-spacing:-.02em;margin-bottom:26px;line-height:1.2}
.care-amt small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-top:8px}
.care-list{list-style:none}
.care-list li{font-size:14px;font-weight:300;line-height:1.7;padding:11px 0 11px 18px;border-top:1px solid var(--line);position:relative;color:var(--ink)}
.care-list li::before{content:'';position:absolute;left:0;top:1.55em;width:7px;height:1px;background:var(--navy)}

/* --- FAQ (GEO: matches FAQPage schema) --- */
.faq-list{border-top:1px solid var(--line);margin-top:20px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:28px 44px 28px 0;position:relative;font-family:inherit;font-size:17px;font-weight:400;line-height:1.55;color:var(--ink);letter-spacing:-.01em;transition:color .2s}
.faq-q:hover{color:var(--navy)}
.faq-q::after{content:'';position:absolute;right:8px;top:50%;width:11px;height:1px;background:var(--ink);transition:transform .3s}
.faq-q::before{content:'';position:absolute;right:8px;top:50%;width:11px;height:1px;background:var(--ink);transform:rotate(90deg);transition:transform .3s,opacity .3s}
.faq-item.open .faq-q::before{transform:rotate(0);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.76,0,.24,1)}
.faq-a-in{padding:0 60px 30px 0;font-size:15px;font-weight:300;line-height:1.95;color:var(--muted)}
.faq-a-in p{margin-bottom:14px}
.faq-a-in p:last-child{margin-bottom:0}
.faq-a-in strong{font-weight:500;color:var(--ink)}

/* --- Deliverable checklist --- */
.chk{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;margin-top:20px}
.chk li{list-style:none;font-size:15px;font-weight:300;line-height:1.7;color:var(--ink);padding:15px 0 15px 22px;border-bottom:1px solid var(--line);position:relative}
.chk li::before{content:'';position:absolute;left:0;top:1.6em;width:9px;height:1px;background:var(--navy)}

/* --- Big CTA band --- */
.cta-band{background:var(--ink);color:#f7f6f4;padding:90px 48px;text-align:center}
.cta-band h2{font-size:clamp(28px,4vw,52px);font-weight:300;letter-spacing:-.03em;line-height:1.15;margin-bottom:20px;color:#f7f6f4}
.cta-band p{font-size:17px;font-weight:300;line-height:1.85;color:rgba(247,246,244,.6);max-width:38em;margin:0 auto 40px}
.cta-band .btn{border-color:rgba(247,246,244,.3);color:#f7f6f4}
.cta-band .btn::before{background:#f7f6f4}
.cta-band .btn:hover{color:var(--ink)}
.cta-band .btn-row{justify-content:center}

/* --- Related links --- */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px}
.rel-card{background:var(--bg);padding:32px 28px;text-decoration:none;color:var(--ink);display:block;transition:background .25s}
.rel-card:hover{background:#f1efeb}
.rel-card .f-n{color:var(--muted)}
.rel-h{font-size:17px;font-weight:400;letter-spacing:-.01em;margin-bottom:8px;line-height:1.4}
.rel-p{font-size:13px;font-weight:300;line-height:1.75;color:var(--muted)}

/* --- Contact form --- */
.pform{max-width:640px;margin-top:20px}
.pf-field{margin-bottom:26px}
.pf-label{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:block}
.pf-field input,.pf-field textarea,.pf-field select{width:100%;background:none;border:none;border-bottom:1px solid var(--line);padding:12px 0;font-family:inherit;font-size:16px;font-weight:300;color:var(--ink);transition:border-color .25s}
.pf-field textarea{resize:vertical;min-height:110px;line-height:1.8}
.pf-field input:focus,.pf-field textarea:focus,.pf-field select:focus{outline:none;border-bottom-color:var(--navy)}
.pf-field input::placeholder,.pf-field textarea::placeholder{color:#c4c0b8}
.pf-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.pf-note{font-family:var(--sans);font-size:12px;font-weight:300;line-height:1.8;color:var(--muted);margin-top:18px}
.pf-note a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(123,105,68,.35);transition:border-color .2s}
.pf-note a:hover{border-bottom-color:var(--navy)}
/* prose links inherit the same treatment rather than browser blue */
.prose a,.faq-a-in a,.answer-box a,.sec-intro a,.step-b a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(123,105,68,.35);transition:border-color .2s}
.prose a:hover,.faq-a-in a:hover,.answer-box a:hover,.sec-intro a:hover,.step-b a:hover{border-bottom-color:var(--navy)}
.pf-done{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);padding:40px 0;line-height:2.2}
.pf-done span{color:var(--muted);display:block}

/* --- Updated stamp (GEO freshness signal) --- */
.stamp{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:26px 0 0;border-top:1px solid var(--line);margin-top:56px}

/* --- Menu: 8 items instead of project.css's 5 --------------------
   project.css sizes .menu-link at clamp(40px,7vw,88px), which at
   1440x900 makes 8 items 802px tall and clips the last one inside
   the overflow:hidden overlay. Cap by viewport height so the list
   always fits, and allow scroll as a final safety net.            */
.menu-nav li:nth-child(6) .menu-link{animation-delay:.3s}
.menu-nav li:nth-child(7) .menu-link{animation-delay:.35s}
.menu-nav li:nth-child(8) .menu-link{animation-delay:.4s}
.menu-overlay-inner{overflow-y:auto}
.menu-link{font-size:min(clamp(26px,4.4vw,58px),7.4vh);line-height:1.14}

/* --- Language switch in header --- */
.lang-links{display:flex;align-items:center;gap:2px;border:1px solid var(--line);padding:2px}
.lang-links a{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:6px 10px;transition:background .2s,color .2s}
.lang-links a:hover{color:var(--ink)}
.lang-links a.on{background:var(--ink);color:var(--bg)}

/* --- Thai + Japanese typography --- */
/* Thai needs more leading than Latin, but 1.35 on display type and 2.0 on body
   read as airy rather than generous. Tightened to sit closer to the copy. */
body.lang-th .page-h1,body.lang-th .cta-band h2{letter-spacing:-.005em!important;line-height:1.2}
body.lang-th .sec-h2{letter-spacing:-.005em!important;line-height:1.26}
body.lang-th .price-amt,body.lang-th .care-amt{line-height:1.15}
body.lang-th .page-lead,body.lang-th .answer-box p,body.lang-th .prose,body.lang-th .prose p{line-height:1.85}
body.lang-th .sec-intro,body.lang-th .faq-a-in p,body.lang-th .f-p,body.lang-th .step-b,
body.lang-th .care-for,body.lang-th .price-for,body.lang-th .rel-p{line-height:1.8}
body.lang-th .faq-q{line-height:1.45}
body.lang-th .price-list li,body.lang-th .care-list li,body.lang-th .chk li,body.lang-th .cmp td{line-height:1.65}
/* The micro-labels carry Thai words. DM Mono has no Thai glyphs, so the family
   falls back anyway and all the 0.1em tracking does is pull the syllables apart. */
body.lang-th .sec-label,body.lang-th .fct,body.lang-th .price-flag,body.lang-th .price-unit,
body.lang-th .care-tag,body.lang-th .f-n,body.lang-th .step-n,body.lang-th .step-when,
body.lang-th .page-meta span,body.lang-th .cmp th,body.lang-th .cmp-note,body.lang-th .stamp,
body.lang-th .offer-label,body.lang-th .offer-card-label,body.lang-th .btn,
body.lang-th .footer-bottom span,body.lang-th .bc-link,body.lang-th .bc-cur{letter-spacing:.02em!important}
body.lang-jp,body.lang-jp *{font-family:'Noto Sans JP',sans-serif!important;letter-spacing:0!important}
body.lang-jp .lang-links a,body.lang-jp .sec-label,body.lang-jp .bc-link,body.lang-jp .bc-cur,body.lang-jp .bc-sep,body.lang-jp .price-unit,body.lang-jp .price-flag,body.lang-jp .step-n,body.lang-jp .step-when,body.lang-jp .f-n,body.lang-jp .care-tag,body.lang-jp .btn,body.lang-jp .cmp th,body.lang-jp .page-meta span,body.lang-jp .fct,body.lang-jp .footer-bottom span,body.lang-jp .stamp,body.lang-jp .cmp-note{font-family:'DM Mono',monospace!important;letter-spacing:.1em!important}

/* --- Responsive --- */
@media(max-width:900px){
  .price-grid{grid-template-columns:1fr}
  .f-grid,.f-grid.two{grid-template-columns:1fr 1fr}
  .rel-grid{grid-template-columns:1fr}
  .care-grid{grid-template-columns:1fr}
  .step{grid-template-columns:56px 1fr;gap:20px}
  .step-b{grid-column:2}
}
@media(max-width:768px){
  .page-wrap{padding:0 20px}
  .page-hero{padding:20px 20px 52px}
  .page-sec{padding:60px 0}
  .page-lead{font-size:17px}
  .prose{font-size:16px}
  .f-grid,.f-grid.two{grid-template-columns:1fr}
  .chk{grid-template-columns:1fr;gap:0}
  .cta-band{padding:64px 20px}
  .price-card{padding:36px 26px}
  .care-card{padding:36px 26px}
  .answer-box{padding:24px 22px}
  .faq-q{font-size:16px;padding:24px 40px 24px 0}
  .faq-a-in{padding-right:20px}
  /* .cmp-note carries real sentences, not just a label — 9px uppercase mono
     is unreadable on a small phone, so drop the label styling on mobile */
  .cmp-note{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;line-height:1.7}
}