:root{color-scheme:dark;--paper:#151815;--white:#222722;--ink:#f3f5ef;--red:#cff39b;--muted:#b9c2b7;--line:#404940;--soft:#2a322a;--green:#a4c8a6;--on-accent:#192015;--field:#1b201b;--selected:#263321}
body{font-size:16px;background:var(--paper);color:var(--ink)}
::selection{background:var(--red);color:var(--on-accent)}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline-color:var(--red)}
.section-shell{max-width:1320px;padding-inline:40px}
.preview-banner{background:var(--soft);color:var(--ink);font-size:11px;letter-spacing:0;gap:10px;padding-block:9px}
.preview-banner button{color:var(--ink);font-size:11px;letter-spacing:0}
.preview-dot{background:var(--red)}.banner-detail{opacity:1;color:var(--muted);font-size:11px}
.site-header{padding-inline:40px;border:0;max-width:1400px}.brand{font-size:24px}.brand-icon{background:var(--red);color:var(--on-accent)}.brand-ai{color:var(--muted)}
.site-header nav{font-size:14px;gap:25px}.site-header nav a:hover{color:var(--red)}.text-button{font-size:13px}
.button{border:0;border-radius:3px;font-size:14px;min-height:52px;transition:transform .18s,background .18s}
.button:active{transform:translateY(1px)}.button-red{background:var(--red);color:var(--on-accent);font-weight:700}.button-red:hover{background:#e0ffc0}
.button-outline{background:var(--soft);color:var(--ink);border:0}.button-outline:hover{background:#364034}.button-dark{background:var(--ink);color:var(--paper)}.button-small{font-size:13px;min-height:43px}
.hero{padding-top:75px;padding-bottom:70px;min-height:620px;grid-template-columns:1fr 1fr;gap:30px}
h1{font-size:clamp(60px,6vw,88px);letter-spacing:-4.5px;line-height:1.04;font-weight:700}.red-word{color:inherit}.red-word:after{content:none}
.hero-description{color:var(--ink);font-size:17px;line-height:1.7;max-width:450px;margin-top:30px;margin-bottom:30px}.hero-points{font-size:12px;color:var(--muted);gap:20px;margin-top:22px}
.hero-art{height:440px}.polaroid{background:var(--white);border:0;box-shadow:none;padding:0;width:230px;border-radius:3px;overflow:hidden}.polaroid-image{height:330px;background:var(--soft)}
.polaroid-left{left:2%;top:16px;transform:rotate(-5deg)}.polaroid-center{left:44%;top:52px;transform:rotate(5deg)}.polaroid-left:hover{transform:rotate(-3deg) translateY(-6px)}.polaroid-center:hover{transform:rotate(3deg) translateY(-6px)}
.polaroid-caption{padding:0 12px;height:48px;color:var(--ink);font-family:inherit;font-size:12px;font-style:normal;white-space:normal}.polaroid-caption small{font-size:9px;color:var(--muted)}
.video-play{background:var(--paper);border:0;backdrop-filter:none;color:var(--ink)}.card-caption{font-size:23px;color:var(--ink);text-shadow:none;background:#151815cc;padding:9px 11px;left:10px;bottom:10px}
.reference-note{bottom:-2px;left:10%;font-size:12px;letter-spacing:0;color:var(--muted)}
.ticker{background:var(--white);border:0;padding:22px 0}.ticker>div{font-size:14px;font-weight:400;letter-spacing:0;white-space:normal;text-align:center;display:block;padding:0 22px;color:var(--muted)}
h2{font-weight:700;font-size:40px;line-height:1.14}h3{font-weight:600}
.templates-section{padding-top:88px;padding-bottom:85px}.section-heading{margin-bottom:36px}.section-heading-right p{font-size:15px;color:var(--ink);line-height:1.6}.filters{gap:8px}.filters button{background:var(--soft);border:0;color:var(--muted);font-size:13px;padding:10px 14px}.filters button.active{color:var(--paper);background:var(--ink)}
.template-grid{gap:26px 16px}.template-image{border-radius:3px;border:0}.template-card.selected .template-image{outline:2px solid var(--red);outline-offset:4px;box-shadow:none}.template-card h3{font-size:16px;margin-top:15px;margin-bottom:7px}.template-card .template-meta{font-size:12px;color:var(--muted)}.template-meta b{color:var(--muted)}.template-check{color:var(--on-accent);background:var(--red)}.template-card .card-play{background:var(--paper);border:0;font-size:10px}
.section-fineprint{font-size:12px;color:var(--muted);margin-top:28px;max-width:850px;line-height:1.6}
.studio-section{background:var(--field);border:0;padding-block:85px}.studio-layout{gap:32px;grid-template-columns:1.08fr .92fr}.creation-form{background:var(--white);border:0;padding:30px;border-radius:5px}
.field-caption{font-size:13px;color:var(--muted)}.form-template h3{font-size:28px;margin-top:8px}.template-help{font-size:14px;color:var(--ink);line-height:1.65;margin-top:14px}.red-link{color:var(--red)}
.field-label label{font-size:14px}.field-label label span,.field-label>span{font-size:12px;color:var(--muted)}.uploads{gap:12px}.upload-box{background:var(--soft);border-color:#686868;height:170px;border-radius:3px}.upload-box.dragover{background:var(--selected);border-color:var(--red)}
.upload-box .upload-symbol{background:var(--white);border:0;color:var(--ink)}.upload-box strong{font-size:13px;font-weight:500}.upload-box small{font-size:12px;color:var(--muted)}.uploaded-photo{background:var(--paper)}.upload-box .remove-photo{background:var(--paper);color:var(--ink)}
.photo-tip,.photo-tip p{font-size:12px;color:var(--muted);line-height:1.6}.photo-tip button{font-size:12px;color:var(--red)}.form-divider{background:var(--line);margin-block:26px}
.package-card{background:var(--soft);border:1px solid transparent;border-radius:3px;padding:16px 12px}.package-card.selected{background:var(--selected);border-color:var(--red)}.package-card strong{font-size:13px}.package-card small{font-size:12px;color:var(--muted);line-height:1.5}.package-card b{font-size:21px;margin-top:12px}.package-card .radio-indicator{border-color:var(--muted);right:9px;top:14px}.package-card.selected .radio-indicator{border-color:var(--red)}
.delivery-note{font-size:12px;color:var(--muted);line-height:1.6;margin-top:15px}.email-label{font-size:14px}input[type=email]{background:var(--soft);border:1px solid #626262;height:48px;color:var(--ink);font-size:15px}input[type=email]::placeholder{color:var(--muted)}input[type=email]:focus{outline-color:var(--red);border-color:var(--red)}
.input-note{font-size:12px;color:var(--muted);line-height:1.6}.consent-label{font-size:12px;color:var(--ink);gap:10px}.consent-label input{width:16px;height:16px;flex-shrink:0}.checkout-button span:first-child{font-size:14px}.checkout-button{min-height:55px}.checkout-reassurance{font-size:11px;color:var(--muted);flex-wrap:wrap;line-height:1.5}.demo-note{font-size:11px;color:var(--muted)}
.preview-meta .preview-label,.preview-meta>span:last-child{font-size:12px;color:var(--muted);letter-spacing:0}.studio-preview{padding:5px 12px 0}.preview-frame{border-radius:4px}.reference-pill{background:var(--paper);color:var(--ink);font-size:11px;letter-spacing:0}.large-play{background:var(--paper);color:var(--ink);border:0;backdrop-filter:none}.preview-bottom>span{font-size:30px}.preview-bottom p{font-size:14px;line-height:1.6;color:#f3f5ef}.preview-disclaimer,.preview-disclaimer p{font-size:12px;color:var(--muted);line-height:1.65}.mini-process{border:0;font-size:12px;color:var(--muted);margin-top:25px}.mini-process b{color:var(--ink);font-size:12px}
.variant-label{font-size:13px}.variant-buttons button{font-size:12px;background:var(--soft);color:var(--muted);border:1px solid transparent;padding:10px 12px}.variant-buttons button.selected{background:var(--selected);color:var(--red);border-color:var(--red)}.form-error{background:#402521;color:#ffcebf;font-size:13px}
.how-section{padding-block:90px}.section-side-copy{font-size:15px;color:var(--ink)}.how-grid{gap:40px;margin-top:40px}.how-grid article{padding-top:20px;background:transparent}.how-grid h3{font-size:20px;line-height:1.3;margin-bottom:15px}.how-grid p{color:var(--ink);font-size:15px;line-height:1.7;max-width:340px}
.pricing-section{border:0;padding-block:75px;gap:24px}.pricing-intro{padding-top:0}.pricing-intro h2{font-size:40px}.pricing-intro p{font-size:15px;color:var(--ink)}.price-card{background:var(--white);border:0;padding:29px;border-radius:4px}.price-card.featured{background:var(--soft);border:0}.price-card-top{font-size:12px;letter-spacing:0;font-weight:500;margin-bottom:28px}.price-card-top>span:last-child{color:var(--muted)}.price-card h3{font-size:25px;font-weight:600}.price-card .price{font-size:38px}.price>span,.price small{font-size:12px;color:var(--muted)}.price-card ul{font-size:14px;color:var(--ink);line-height:1.65;padding-top:20px}.price-card li{padding-left:0;margin-block:12px}.price-card li:before{content:none}.price-card .button{font-size:13px;min-height:48px}.pricing-footnote{font-size:12px;color:var(--muted);text-align:left;line-height:1.7}
.faq-section{border:0;padding-block:85px;gap:80px}.faq-section>div>p:not(.eyebrow){font-size:15px;color:var(--ink)}.faq-list{border:0}.faq-list details{border:0;background:var(--white);margin-bottom:8px;padding-inline:20px;border-radius:3px}.faq-list summary{font-size:15px;padding-block:20px;line-height:1.5}.faq-list summary span{color:var(--muted)}.faq-list details p{font-size:14px;color:var(--ink);line-height:1.75;padding-bottom:23px}
.last-cta{background:var(--white);color:var(--ink);padding-block:65px}.last-cta .button{background:var(--red);color:var(--on-accent);font-size:14px}.last-cta h2{font-size:38px}.site-footer{padding-top:42px;gap:30px}.site-footer>p{font-size:12px;color:var(--muted)}.site-footer>div,.site-footer>div .text-button{font-size:13px}.site-footer>small{font-size:12px;color:var(--muted);border:0;padding-top:15px;line-height:1.7}
dialog{background:var(--white);border:0;color:var(--ink);padding:37px}.modal-close{color:var(--muted)}dialog::backdrop{background:#000b;backdrop-filter:none}.modal-status{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 18px}.modal-title{font-size:30px;font-weight:600}.modal-copy{font-size:15px;color:var(--ink);line-height:1.75}.modal-summary{border-color:var(--line)}.modal-summary h3{font-size:16px}.modal-summary p{font-size:13px;color:var(--muted)}.modal-row{font-size:14px;color:var(--muted);line-height:1.5}.modal-row b{color:var(--ink)}.modal-small{font-size:12px;color:var(--muted);line-height:1.7}.modal-image{background:var(--paper)}.modal-list{font-size:15px;color:var(--ink)}.modal-field{font-size:14px}.progress-track{background:var(--soft)}.progress-track div{background:var(--red)}.progress-stage{font-size:14px;color:var(--muted)}.progress-stage.current{color:var(--red)}.progress-stage.done{color:var(--green)}.result-icon{background:#26362a;color:var(--green);font-size:13px}.result-email{background:var(--soft);color:var(--muted);font-size:14px;line-height:1.7}.result-email b{color:var(--ink)}.media-unavailable{background:var(--soft);color:var(--ink);font-size:14px;line-height:1.75}.guide-examples p{font-size:12px;color:var(--muted)}.order-history-item{background:var(--soft);border:0;padding:20px}.order-history-item h3{font-size:16px}.order-history-item p{font-size:13px;color:var(--muted)}.toast{background:var(--ink);color:var(--paper);font-size:14px}
.language-switch{border:0;background:var(--soft);color:var(--ink);min-width:45px;height:38px;font-size:12px;border-radius:3px;padding:0 10px}.language-switch:hover{background:var(--line)}
html[lang=zh] body{font-family:'DM Sans','PingFang SC','Microsoft YaHei',sans-serif}html[lang=zh] h1,html[lang=zh] h2,html[lang=zh] h3{font-family:Manrope,'PingFang SC','Microsoft YaHei',sans-serif;letter-spacing:-.03em}html[lang=zh] h1{font-size:clamp(57px,5.8vw,80px)}
@media(max-width:1050px){.section-shell,.site-header{padding-inline:28px}.header-actions{gap:13px}.site-header nav{gap:18px;font-size:13px}.button-small{font-size:12px;padding-inline:14px}.hero-art{transform:scale(.9);transform-origin:center right}.hero-cta .button{font-size:13px;padding-inline:19px}.studio-layout{gap:20px}.creation-form{padding:24px}.package-card{padding:15px 9px}.package-card strong{font-size:12px}.package-card small{font-size:11px}.package-card b{font-size:19px}.template-card .template-meta{font-size:11px}.how-grid{gap:25px}.price-card{padding:24px}.price-card h3{font-size:23px}}
@media(max-width:760px){.section-shell,.site-header{padding-inline:22px}.site-header{height:78px}.brand{font-size:19px;gap:7px}.brand-icon{width:29px;height:29px;line-height:29px}.header-actions{gap:8px}.header-actions>.text-button{font-size:11px}.header-actions>.button{display:none}.language-switch{font-size:11px;height:35px;min-width:40px;padding-inline:8px}.preview-banner{font-size:10px;padding-inline:16px}.preview-banner button{font-size:10px}.hero{padding-block:44px;gap:30px;min-height:unset}.hero h1{font-size:clamp(46px,14.7vw,62px);letter-spacing:-3px;margin-bottom:0}html[lang=zh] .hero h1{font-size:clamp(43px,13.8vw,58px)}.hero-description{font-size:15px;line-height:1.7;margin-top:25px;margin-bottom:25px}.hero-cta{flex-wrap:wrap;gap:9px}.hero-cta .button{font-size:13px;padding-inline:20px;min-height:48px;gap:15px}.hero-points{font-size:11px;gap:13px;flex-wrap:wrap;margin-top:21px}.hero-art{height:390px;transform:none;max-width:440px}.polaroid{width:47%}.polaroid-image{height:280px}.polaroid-left{left:1%;top:15px}.polaroid-center{left:49%;top:40px}.polaroid-caption{padding-inline:9px;font-size:11px;height:45px}.polaroid-caption small{font-size:8px}.card-caption{font-size:17px;padding:6px 8px}.reference-note{left:4%;font-size:11px;bottom:0}.ticker{padding-block:20px}.ticker>div{font-size:13px}.templates-section{padding-block:52px}.section-heading{gap:22px}.section-heading-right p{font-size:14px}.filters button{font-size:12px;padding:10px 12px}.template-grid{gap:25px 14px}.template-card h3{font-size:15px;line-height:1.35}.template-card .template-meta{font-size:11px;flex-wrap:wrap}.section-fineprint{font-size:12px;line-height:1.7}.studio-section{padding-block:52px}.studio-section h2{font-size:31px}.creation-form{padding:22px}.studio-layout{gap:30px}.template-help{font-size:14px}.field-label label{font-size:14px}.package-options{gap:7px}.package-card{padding:15px 10px}.package-card strong{font-size:12px;padding-right:8px}.package-card small{font-size:11px}.package-card b{font-size:20px}.package-card .radio-indicator{right:6px;top:14px;width:8px;height:8px}.checkout-button{padding-inline:14px;gap:10px}.checkout-button span:first-child{font-size:13px}.checkout-reassurance{font-size:11px;justify-content:flex-start;gap:13px}.photo-tip{flex-wrap:wrap}.photo-tip p{font-size:12px;flex-basis:calc(100% - 25px)}.photo-tip button{margin-left:23px;font-size:12px}.preview-bottom>span{font-size:29px}.studio-preview{padding:0}.how-section,.pricing-section,.faq-section{padding-block:52px}.how-grid{gap:28px;margin-top:25px}.how-grid article{padding-top:0}.how-grid h3{font-size:20px}.how-grid p{font-size:15px;max-width:100%}.price-card{padding:27px}.pricing-intro h2{font-size:34px}.price-card h3{font-size:26px}.price-card-top{font-size:12px}.price-card ul{font-size:14px}.price-card .button{font-size:14px}.pricing-footnote{font-size:12px}.faq-section{gap:20px}.faq-list details{padding-inline:17px}.faq-list summary{font-size:14px;line-height:1.6}.faq-list details p{font-size:14px;padding-right:0}.last-cta{padding-block:45px}.last-cta h2{font-size:32px}.last-cta .button{font-size:14px;margin-top:17px}.site-footer{padding-top:34px;gap:23px}.site-footer>p{font-size:11px}.site-footer>div,.site-footer>div .text-button{font-size:13px}.site-footer>small{font-size:11px}dialog{padding:33px 23px}.modal-title{font-size:28px}.modal-copy{font-size:14px}.modal-row{font-size:13px}.modal-summary h3{font-size:15px}.modal-summary p{font-size:12px}.modal-small{font-size:12px}.modal-summary>strong{font-size:22px}.modal-full-button{font-size:14px}.uploads.two .upload-box strong{font-size:12px}.uploads.two .upload-box small{font-size:10px}}
@media(min-width:761px) and (max-width:1000px){.site-header nav{display:none}.hero h1{font-size:clamp(42px,6.3vw,60px);letter-spacing:-2.5px}html[lang=zh] .hero h1{font-size:clamp(42px,6.3vw,58px)}.hero-cta{flex-wrap:wrap}.hero-art{transform:scale(.78);transform-origin:center right}.pricing-section{grid-template-columns:1fr 1fr}.pricing-intro{grid-column:1/-1;display:flex;gap:35px;align-items:center;justify-content:space-between}.pricing-intro h2{flex-shrink:0}.pricing-intro p{margin:0}.pricing-intro>a{flex-shrink:0}.price-card h3{font-size:25px}.studio-layout{grid-template-columns:1fr 1fr}.creation-form{padding:20px}.package-options{grid-template-columns:1fr!important}.package-card{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;align-items:center}.package-card strong{margin:0}.package-card b{grid-column:2;grid-row:1/3;text-align:right;margin:0;padding-right:8px}.package-card small:last-of-type{display:none}.package-card .radio-indicator{display:none}.photo-tip{flex-wrap:wrap}.photo-tip p{flex-basis:calc(100% - 30px)}.photo-tip button{margin-left:23px}}
@media(min-width:761px) and (max-width:1000px){.hero-art{transform:none;margin-left:0;height:350px;min-width:0}.hero-art .polaroid{width:46%}.hero-art .polaroid-image{height:260px}.hero-art .polaroid-left{left:1%;top:15px}.hero-art .polaroid-center{left:49%;top:42px}.hero-art .polaroid-caption{font-size:11px;padding-inline:8px}.hero-art .polaroid-caption small{font-size:8px}.hero-art .card-caption{font-size:16px;padding:6px}.hero-art .reference-note{left:0;bottom:-12px;font-size:11px}.hero-description{font-size:16px}}
.hero-art .reference-note{top:100%;bottom:auto;left:0;width:100%;margin:0;padding-top:20px;line-height:1.5}

/* The rounded bt tile becomes the frame for the pet, the templates and the comparison. */
:root {
  --accent: #cff39b;
  --red: var(--accent);
  --radius: 12px;
  --hero-note: #c4cec0;
}

.button,
.brand-icon,
.hero-upload,
.language-switch,
.filters button,
.creation-form,
.upload-box,
.package-card,
input[type="email"],
.variant-buttons button,
.costume-buttons button,
.preview-frame,
.template-image,
.price-card,
.faq-list details,
dialog,
.modal-image,
.order-history-item {
  border-radius: var(--radius);
}

.brand {
  flex: 0 0 auto;
}

.brand:not(:has(img, .brand-icon))::before {
  content: '';
  width: 31px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  background: url('assets/brand/badtimesai-icon-on-dark.svg') center / contain no-repeat;
}

.brand > img,
.brand-lockup {
  display: block;
  width: 174px;
  height: auto;
  max-width: 45vw;
}

.hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 5vw, 78px);
  min-height: 0;
  padding-block: clamp(30px, 5vw, 78px) clamp(42px, 5.5vw, 86px);
}

.hero-copy { min-width: 0; }

.hero h1 {
  font-size: clamp(48px, 6.15vw, 88px);
  line-height: 1.03;
  letter-spacing: -.064em;
  font-weight: 750;
}

html[lang^="zh"] .hero h1 {
  font-size: clamp(44px, 5.65vw, 80px);
  letter-spacing: -.04em;
}

.hero .red-word { color: var(--accent); }

.hero-description {
  max-width: 32ch;
  margin: 23px 0 23px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink);
  line-height: 1.58;
}

.hero-cta {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 20px;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.hero-upload:hover { background: #e0ffc0; }

.hero-upload svg {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
}

.hero-upload:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.hero-points {
  gap: 9px 16px;
  margin-top: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.hero-art {
  position: relative;
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  transform: none;
  margin: 0;
}

.hero-art .polaroid-left,
.hero-art .video-play,
.hero-art .card-caption,
.hero-cta .play-icon,
.template-card .card-play { display: none; }

.hero-art .polaroid-center,
.hero-art .polaroid-left[data-hero-template="bad_times_pet"],
.hero-art .hero-feature,
.hero-art .hero-visual {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  transform: none;
  text-align: left;
}

.hero-art .polaroid:hover { transform: none; }

.hero-art:has(.polaroid-left[data-hero-template="bad_times_pet"]) .polaroid-center {
  display: none;
}

.hero-art .polaroid-image,
.hero-art .hero-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  overflow: hidden;
}

.hero-art .polaroid-image img,
.hero-art .hero-image img,
.hero-art img.hero-image,
.hero-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
  animation: none;
}

.hero-art > img { aspect-ratio: 5 / 4; border-radius: var(--radius); }

.hero-art .polaroid-caption,
.hero-art .hero-image-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  height: auto;
  padding: 8px 13px;
  font-size: 13px;
}

.hero-art .polaroid-caption small { color: var(--hero-note); font-size: 12px; }

.hero-art .reference-note {
  position: static;
  inset: auto;
  width: auto;
  padding: 0;
  margin: 0;
  color: var(--hero-note);
  font-size: 13px;
  line-height: 1.5;
}

.template-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 25px 15px;
}

.template-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 0 20px;
}

.template-filters button {
  border: 0;
  border-radius: var(--radius);
  padding: 9px 14px;
  background: var(--soft);
  color: var(--ink);
  font-size: 13px;
}

.template-filters button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

#studio .product-options textarea,
#studio .product-options input[type="email"] {
  border-radius: var(--radius);
}

.template-card {
  display: block;
  color: var(--ink);
  border-radius: var(--radius);
}

.template-image {
  aspect-ratio: 9 / 16;
  outline-offset: 3px;
}

.template-card.selected .template-image { outline: 2px solid var(--accent); }

.template-image img { object-position: center 35%; }

.template-tag {
  color: var(--ink);
  background: var(--field);
  max-width: calc(100% - 16px);
  border-radius: var(--radius);
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1.25;
}

.template-tag.hot,
.template-check {
  background: var(--accent);
  color: var(--on-accent);
}

.template-card h3 { margin: 11px 0 5px; line-height: 1.25; }
.template-card .template-meta { flex-wrap: wrap; font-size: 12px; line-height: 1.4; }

.sample-compare {
  margin-block: 16px 0;
  color: var(--ink);
}

.sample-compare-grid,
.sample-compare-pair,
.sample-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(9px, 2vw, 20px);
  align-items: start;
}

.sample-card,
.sample-compare figure {
  min-width: 0;
  margin: 0;
}

.sample-compare .sample-frame,
.sample-compare .sample-media,
.sample-compare .sample-placeholder,
.sample-compare .sample-pending {
  display: grid;
  width: 100%;
  aspect-ratio: 9 / 16;
  place-items: center;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--soft);
  color: var(--muted);
}

.sample-compare .sample-placeholder,
.sample-compare .sample-pending {
  align-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
}

.sample-compare .sample-placeholder > svg { width: 28px; height: 28px; }

.sample-compare figure img,
.sample-compare figure video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  object-fit: cover;
  object-position: 50% 32%;
}

.sample-compare figcaption,
.sample-compare .sample-caption,
.sample-compare .sample-label {
  margin-block: 8px 0;
  font-size: 13px;
  line-height: 1.45;
}

.sample-compare .sample-note {
  margin-block: 12px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.steps-grid article {
  padding: 20px;
  border-radius: var(--radius);
  background: var(--white);
}

.steps-grid h3 { margin: 0 0 8px; font-size: 18px; }
.steps-grid p { margin: 0; line-height: 1.6; color: var(--muted); }

#pricing .pricing-intro { grid-column: 1 / -1; }
#pricing .price-card { display: flex; flex-direction: column; }
#pricing .price-card .button { margin-top: auto; }

@media (min-width: 761px) {
  #pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
  .template-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero { gap: 24px; }
}

@media (max-width: 760px) {
  .site-header { height: 62px; }
  .brand > img, .brand-lockup { width: 139px; }
  .hero { gap: 21px; padding-block: 23px 38px; }
  .hero h1 {
    font-size: clamp(41px, 12.1vw, 65px);
    letter-spacing: -.065em;
  }
  html[lang^="zh"] .hero h1 { font-size: clamp(37px, 11vw, 57px); }
  .hero-description { margin: 13px 0 15px; line-height: 1.48; }
  .hero-cta { gap: 8px; }
  .hero-upload { flex: 1 1 154px; min-height: 48px; }
  .hero-cta .button-outline { min-height: 48px; padding-inline: 12px; }
  .hero-points { margin-top: 11px; font-size: 12px; }
  .hero-art { gap: 7px; }
  .hero-art .polaroid-image,
  .hero-art .hero-image,
  .hero-art > img { aspect-ratio: 16 / 10; }
  .hero-art .polaroid-image img,
  .hero-art .hero-image img,
  .hero-art img.hero-image,
  .hero-art > img { object-position: 50% 5%; }
  .hero-art .polaroid-caption,
  .hero-art .hero-image-caption { min-height: 33px; font-size: 12px; }
  .hero-art .reference-note { font-size: 12px; }
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 13px; }
  .template-tag { font-size: 11px; }
  .sample-compare .sample-placeholder { padding: 8px; font-size: 13px; }
  .steps-grid { grid-template-columns: 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .template-image img, .button { transition: none; }
}