/* ============================================================
   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)}
.page-sec:last-of-type{border-bottom:none}

/* --- 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)}
.price-list li.off{color:#bbb}
.price-list li.off::before{background:#ddd}

/* --- 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 --- */
body.lang-th .page-h1,body.lang-th .sec-h2,body.lang-th .price-amt,body.lang-th .care-amt,body.lang-th .cta-band h2{letter-spacing:-.01em!important;line-height:1.35}
body.lang-th .page-lead,body.lang-th .prose,body.lang-th .answer-box p{line-height:2}
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}
}