/* LionRise Studio site (LionRise Commerce product pages): shared styles */

:root{
  --paper:#E9EBE6;
  --surface:#F3F4EF;
  --surface-2:#DEE1D9;
  --ink:#1B1A16;
  --ink-2:#4A4A42;
  --muted:#7C7C71;
  --line:rgba(27,26,22,0.14);
  --line-2:rgba(27,26,22,0.28);
  --brass:#8A6E22;
  --brass-bright:#A9862B;
  --sage:#4C6B47;
  --clay:#A24E37;
  --header-h:4.25rem;

  --font-display:'Archivo','Noto Sans TC','Helvetica Neue',Arial,sans-serif;
  --font-body:'Archivo','Noto Sans TC','Helvetica Neue',Arial,sans-serif;
  --font-serif:'Newsreader','Noto Serif TC',Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono','Noto Sans TC',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#13171A;
    --surface:#1C2126;
    --surface-2:#262B30;
    --ink:#ECE9E1;
    --ink-2:#B8B8AF;
    --muted:#8A9096;
    --line:rgba(236,233,225,0.14);
    --line-2:rgba(236,233,225,0.28);
    --brass:#C8A24C;
    --brass-bright:#DEBB6C;
    --sage:#8FAE88;
    --clay:#CD8067;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-0.02em;line-height:1.08;text-wrap:balance;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:lang(zh-Hant) h1,:lang(zh-Hant) h2,:lang(zh-Hant) h3{letter-spacing:0;line-height:1.3}
:lang(zh-Hant) p,:lang(zh-Hant) li{line-height:1.75}

.container{max-width:72rem;margin:0 auto;padding-inline:1.25rem}
@media (min-width:768px){.container{padding-inline:2rem}}

.eyebrow{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);display:inline-flex;align-items:center;gap:.5rem;
}
:lang(zh-Hant) .eyebrow{letter-spacing:.06em}
.eyebrow::before{content:"";width:.55rem;height:.55rem;background:var(--brass);display:block}

h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.35rem)}
h3{font-size:1.15rem}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--ink-2);max-width:38rem;line-height:1.55}
.section-head{display:flex;flex-direction:column;gap:.9rem;margin-bottom:2.75rem}
.section-head.center{align-items:center;text-align:center;margin-inline:auto}

section{padding-block:clamp(3.5rem,7vw,6rem)}
section.tight{padding-block:clamp(2.5rem,5vw,4rem)}
.band{background:var(--surface);border-block:1px solid var(--line)}
.rule{border:0;border-top:1px solid var(--line);margin-block:0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:700;font-size:.95rem;
  padding:.8rem 1.5rem;border-radius:2px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .12s ease,background .15s ease,border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brass);color:#151310}
.btn-primary:hover{background:var(--brass-bright)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass)}
.btn-block{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

/* header / nav */
header.site{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);height:var(--header-h);
}
.nav-row{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.wordmark{font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:-0.02em;display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink)}
.wordmark::before{content:"";width:.7rem;height:.7rem;background:var(--brass);display:block}
.wordmark{white-space:nowrap}
.wordmark-sub{font-weight:500;color:var(--ink-2)}
/* Header only: the full name doesn't fit beside the CTA on narrow phones. Footer always shows it. */
@media (max-width:479px){header.site .wordmark-sub{display:none}}
/* Below 420px the header CTA overflows the row; Contact stays reachable via the menu. */
@media (max-width:419px){header.site .nav-tools .btn{display:none}}
nav.primary{display:none;align-items:center;gap:2rem}
nav.primary a{font-size:.95rem;text-decoration:none;color:var(--ink-2);padding-block:.3rem;border-bottom:2px solid transparent}
nav.primary a:hover,nav.primary a[aria-current="page"]{color:var(--ink);border-color:var(--brass)}
@media (min-width:900px){nav.primary{display:flex}}

.nav-tools{display:flex;align-items:center;gap:.9rem}
.langlinks{display:flex;gap:2px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em}
.langlinks a{padding:.35rem .55rem;color:var(--muted);text-decoration:none;background:var(--surface-2)}
.langlinks a[aria-current="true"]{background:var(--brass);color:#151310}
.menu-btn{display:inline-flex;background:none;border:1px solid var(--line-2);padding:.5rem;cursor:pointer;color:var(--ink)}
@media (min-width:900px){.menu-btn{display:none}}

.mobile-menu{display:none;flex-direction:column;gap:0;border-bottom:1px solid var(--line);background:var(--paper)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:1rem 1.25rem;text-decoration:none;color:var(--ink);border-top:1px solid var(--line);font-size:1rem}
@media (min-width:900px){.mobile-menu{display:none !important}}

/* hero */
.hero{padding-block:clamp(3rem,8vw,6rem) clamp(2.5rem,6vw,4rem)}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:3.5rem}}
.hero h1{margin-top:1rem}
.hero .lead{margin-top:1.2rem}

.shot{border:1px solid var(--line-2);border-radius:4px;overflow:hidden;background:var(--surface);box-shadow:0 2rem 4rem -1.75rem rgba(0,0,0,.35)}
.shot .bar{height:1.9rem;display:flex;align-items:center;gap:.4rem;padding:0 .8rem;border-bottom:1px solid var(--line);background:var(--surface)}
.shot .bar i{width:.5rem;height:.5rem;border-radius:50%;background:var(--line-2);display:block}
.shot img{display:block;width:100%;height:auto}
.shot-caption{font-family:var(--font-mono);font-size:.78rem;color:var(--muted);margin-top:.8rem}

/* stat cards */
.stat-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:1fr}
@media (min-width:700px){.stat-grid{grid-template-columns:repeat(3,1fr)}}
.stat-card{background:var(--paper);padding:1.75rem}
.stat-card .num{font-family:var(--font-display);font-weight:800;font-size:2.1rem;color:var(--brass);letter-spacing:-0.02em;line-height:1}
.stat-card p{margin-top:.6rem;color:var(--ink-2);font-size:.95rem;line-height:1.5}

/* two-col control/handle */
.split{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media (min-width:760px){.split{grid-template-columns:1fr 1fr}}
.colhead{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
:lang(zh-Hant) .colhead{letter-spacing:.04em}
ul.pts{display:flex;flex-direction:column;gap:.9rem}
ul.pts li{position:relative;padding-left:1.3rem;color:var(--ink-2);font-size:1rem;line-height:1.45}
ul.pts li::before{content:"";position:absolute;left:0;top:.5rem;width:.5rem;height:.5rem;background:var(--brass)}
ul.pts.pos li::before{background:var(--sage)}
ul.pts li b{color:var(--ink)}
.scope-note{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);margin-top:2rem;max-width:48rem;line-height:1.6}

/* feature grid */
.grid3{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line-2);border-left:1px solid var(--line)}
@media (min-width:640px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid3 .cell{padding:1.6rem 1.5rem;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.grid3 .cell h3{margin-bottom:.5rem}
.grid3 .cell p{color:var(--ink-2);font-size:.95rem;line-height:1.5}
.grid3 .cell .price{font-family:var(--font-mono);font-size:1.5rem;color:var(--brass);margin:.5rem 0 .3rem}
.grid3 .cell .price-sub{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);margin-bottom:1rem}
.grid3 .cell.plan{display:flex;flex-direction:column}
.grid3 .cell.plan ul.pts{margin-top:.4rem}
.grid3 .cell.plan .btn{margin-top:1.4rem;align-self:flex-start}
.grid3 .cell.hi{background:color-mix(in srgb, var(--brass) 7%, transparent)}

/* screenshots duo */
.duo{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:760px){.duo{grid-template-columns:1fr 1fr}}

/* comparison table */
.table-wrap{overflow-x:auto;border:1px solid var(--line-2)}
table.matrix{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
table.matrix th,table.matrix td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
table.matrix thead th{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-2);background:var(--surface)}
table.matrix tbody th{font-weight:600;color:var(--ink-2);width:26%}
table.matrix col.hi{background:color-mix(in srgb, var(--brass) 10%, transparent)}
table.matrix td.b{color:var(--ink);font-family:var(--font-mono)}
table.matrix .no{color:var(--clay);font-family:var(--font-mono)}
table.matrix .mid{color:var(--muted);font-family:var(--font-mono)}

/* cost bars */
.barlist{display:flex;flex-direction:column;gap:1.1rem}
.barrow{display:grid;grid-template-columns:8rem 1fr;gap:1rem;align-items:center}
@media (min-width:640px){.barrow{grid-template-columns:10rem 1fr 8rem}}
.barrow .plat{font-family:var(--font-mono);font-size:.85rem;color:var(--ink-2)}
.barrow .track{height:1.6rem;background:var(--surface-2)}
.barrow .fill{height:100%;background:var(--muted)}
.barrow.hi .fill{background:var(--brass)}
.barrow.hi .plat{color:var(--ink)}
.barrow .val{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-2);grid-column:2 / -1;justify-self:start}
@media (min-width:640px){.barrow .val{grid-column:3;justify-self:end;text-align:right}}

/* pricing cards */
.plans{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line-2);border-left:1px solid var(--line)}
@media (min-width:860px){.plans{grid-template-columns:repeat(3,1fr)}}
.plans .cell{padding:2rem 1.75rem;border-bottom:1px solid var(--line);border-right:1px solid var(--line);display:flex;flex-direction:column}

.ledger{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.ledger .row{display:flex;justify-content:space-between;gap:1.5rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.ledger .row .k{color:var(--ink-2);font-size:.95rem}
.ledger .row .v{font-family:var(--font-mono);font-size:.92rem;color:var(--ink);white-space:nowrap}
.ledger .row .v.good{color:var(--sage)}
.note{font-family:var(--font-mono);font-size:.85rem;color:var(--muted);line-height:1.65;max-width:60rem}

.fit-note{background:var(--surface);border:1px solid var(--line);padding:1.5rem;margin-top:2.5rem}
.fit-note p{color:var(--ink-2);font-size:.98rem;line-height:1.6}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line);padding-block:1.1rem}
.faq summary{cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--brass);font-size:1.3rem;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq .a{color:var(--ink-2);margin-top:.75rem;line-height:1.6;max-width:44rem}

/* contact form */
.form-grid{display:grid;gap:1.1rem;grid-template-columns:1fr;max-width:38rem}
@media (min-width:620px){.form-grid.two{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1 / -1}
.field label{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);
  padding:.75rem .85rem;border-radius:2px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brass);outline-offset:1px}
.field textarea{resize:vertical;min-height:8rem}
.form-note{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);margin-top:1rem}
.form-status{margin-top:1rem;font-size:.95rem;display:none}
.form-status.show{display:block}
.form-status.ok{color:var(--sage)}
.form-status.err{color:var(--clay)}
.contact-alt{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.contact-alt a{color:var(--brass);text-decoration:none;font-weight:700}
.contact-alt a:hover{text-decoration:underline}

/* footer */
footer.site{border-top:1px solid var(--line);padding-block:3rem}
.footer-grid{display:flex;flex-direction:column;gap:2rem}
@media (min-width:760px){.footer-grid{flex-direction:row;justify-content:space-between;align-items:flex-start}}
.footer-nav{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.92rem;color:var(--ink-2)}
.footer-nav a{text-decoration:none;color:inherit}
.footer-nav a:hover{color:var(--brass)}
.footer-meta{font-family:var(--font-mono);font-size:.78rem;color:var(--muted);margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1.25rem}
.footer-tag{color:var(--muted);font-size:.9rem;margin-top:.5rem;max-width:22rem}

/* CTA band */
.cta-band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.cta-band .section-head{margin-bottom:0}
.cta-band .cta-row{justify-content:center}

.skip-link{position:absolute;left:-999px;top:0;background:var(--brass);color:#151310;padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:1rem;top:1rem}