:root { --service-text:#45413c; --service-action:#665545; --service-rule:#d5cdc0; }
body {font-family:"PingFang TC","Microsoft JhengHei",sans-serif;}
.service-header {width:min(1240px,100%);margin:auto;min-height:76px;height:auto;padding:10px 5%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:white;border:0;border-bottom:1px solid var(--service-rule);}
.service-header .brand img {display:block;width:58px;height:auto;object-fit:contain;}
.service-header .brand {display:flex;align-items:center;gap:12px;letter-spacing:.04em;font-size:16px;color:var(--service-text);}
.service-nav {display:flex;align-items:center;flex-wrap:wrap;gap:20px;font-size:15px;}
.service-nav a,.mobile-nav a {display:inline-flex;align-items:center;min-height:44px;color:var(--service-text);}
.service-header .mobile-nav {display:none;}
.service-header .mobile-nav summary {font-size:16px;font-weight:650;min-height:44px;align-items:center;gap:16px;}
.mobile-nav nav {display:grid;gap:0;}
.mobile-nav a {border-top:1px solid var(--service-rule);}
:focus-visible {outline:3px solid #8c4b1d;outline-offset:4px;}
.skip-link {position:absolute;left:12px;top:-200px;z-index:50;background:white;padding:10px;}
.skip-link:focus {top:8px;}
main .hero p,main .plan p,main .step p,main section p,main section li,form input,form select,form textarea {font-size:16px;line-height:1.8;}
main .fine,main .proposal,main .bill,main small, main .buy-note, footer, footer a,form label {font-size:14px!important;line-height:1.7!important;}
main h1,main h2 {text-wrap:balance;}
main :is(.btn,.choose),button[data-cycle],.tabs button {min-height:44px;}
main .hero {align-items:center;}
.hero .hero-art,.hero .hero-media {height:auto;max-width:440px;width:100%;margin:auto;padding:0;}
.hero .hero-art img,.hero .hero-media img {display:block;width:100%;height:auto;max-height:none;aspect-ratio:4/4.3;object-fit:cover;object-position:center 40%;filter:none;border-radius:4px;}
.site-section-label {font-size:15px;letter-spacing:.08em;color:#65564a;font-weight:700;}
.service-footer {display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;max-width:1160px;margin:auto;padding:28px 6%;font-size:14px;background:white;}
.service-footer a {display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px;}
@media(max-width:800px){
  .service-header {display:grid;grid-template-columns:1fr auto;min-height:70px;}
  .service-header .brand img {width:46px;height:auto;}
  .service-header .service-nav {display:none;}
  .service-header .mobile-nav {display:block;position:relative;padding:0;border:0;z-index:2;}
  .service-header .mobile-nav nav {position:absolute;right:0;min-width:190px;background:white;border:1px solid var(--service-rule);padding:8px 16px;box-shadow:0 6px 16px #44332216;}
  .service-header .mobile-nav nav a {display:flex;}
  main .hero {gap:20px;}
  .hero .hero-art,.hero .hero-media {max-width:380px;}
  .hero .hero-art img,.hero .hero-media img {aspect-ratio:1.2;}
  .hero p br {display:none;}
  .plans,.pricing-grid,main .hero>*, form, fieldset {min-width:0;}
  .dialog-actions {flex-wrap:wrap;gap:8px;}
  .service-footer {align-items:flex-start;}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
.hero h1 span:after {background:#ee934c;} .end p {color:white;} .proposal,.bill {color:#635b51;}

.hero .hero-art, .hero .hero-media {
  position: relative;
  max-width: 500px;
  padding: 10px 8px 22px;
  overflow: visible;
}
.hero .photo-slip {
  position: absolute;
  z-index: 1;
  bottom: 2px;
  left: 0;
  padding: 10px 17px;
  background: white;
  color: #525252;
  border-left: 3px solid #d5cdc0;
  box-shadow: 0 4px 14px #352d221c;
  transform: rotate(-3deg);
  font-size: 15px;
  line-height: 1.6;
}
.hero .photo-slip small { display: block; color: #73563c; }

@media (max-width: 450px) {
  .paper-columns { grid-template-columns: minmax(0, 1fr); }
  .paper-columns > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .paper-top { flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
  #subscription { padding: 20px; max-height: 90dvh; overflow-y: auto; }
  #subscription h2 { margin: 0 48px 16px 0; text-wrap: balance; }
  #subscription .close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; }
  #subscription p { font-size: 16px; line-height: 1.65; }
  #subscription .dialog-actions { display: grid; gap: 6px; }
  #subscription .dialog-actions > * { min-height: 44px; text-align: center; }
}