/* Nowpot refinement: keep the original structure, refine its rhythm. */
:root {
  --ink: #252b25;
  --muted: #767c72;
  --brand: #405b4d;
  --line: #e9ece6;
  --soft: #fafbf8;
}

body { letter-spacing: -.012em; }
.page-width { width: min(1216px, calc(100% - 112px)); }
.eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 2.3px; }
.header-inner { width: min(1384px, calc(100% - 112px)); height: 90px; }
.site-header { border-bottom-color: #eef0eb; }
.brand img { width: 152px; max-height: 49px; }
.desktop-nav { gap: 44px; margin-left: 0; }
.desktop-nav a { font-size: 14px; font-weight: 500; letter-spacing: -.1px; }
.desktop-nav a::after { height: 1px; bottom: 23px; }
.header-detail { font-size: 11px; letter-spacing: .02em; }

.hero { height: clamp(520px, 44vw, 740px); }
.hero-copy {
  left: max(56px, calc((100% - 1384px) / 2));
  top: 27%;
  max-width: 540px;
  color: #29372d;
  text-shadow: none;
}
.hero-copy > span { margin-bottom: 22px; font-size: 9px; font-weight: 500; letter-spacing: 2.7px; }
.hero-copy h1 { font-size: clamp(43px, 3.85vw, 64px); font-weight: 500; line-height: 1.22; letter-spacing: -2.6px; }
.hero-copy > a { gap: 36px; min-height: 44px; margin-top: 24px; font-size: 12px; border-bottom-color: #55605280; }
.hero-shade {
  background: linear-gradient(90deg, #f6f7f0 0%, #f6f7f0 39%, #f6f7f0ba 45%, transparent 62%);
}
.hero-topline { display: none; }
.hero-bottom { left: max(56px, calc((100% - 1384px) / 2)); right: max(56px, calc((100% - 1384px) / 2)); bottom: 43px; }
.hero-film-button { min-height: 48px; padding: 14px 20px; font-size: 12px; color: #29372d; background: #ffffffe0; border: 1px solid #ffffffa0; backdrop-filter: blur(12px); }
.hero-film-button:hover { background: #fff; }
.hero-controls { padding: 6px 9px 6px 16px; background: #ffffffd9; color: #29372d; gap: 3px; backdrop-filter: blur(12px); }
.hero-controls button { color: inherit; width: 33px; height: 33px; }
.hero-controls button:hover { background: #405b4d0e; }
.hero-counter { font-size: 8px; letter-spacing: 1.4px; }
.hero-counter span { font-size: 10px; }
.hero-progress { left: max(56px, calc((100% - 1384px) / 2)); right: max(56px, calc((100% - 1384px) / 2)); bottom: 24px; background: #2d392c26; }
.hero-progress span { height: 1px; background: #405b4d99; }

.intro-strip { padding-block: 66px; }
.intro-copy .eyebrow { font-weight: 450; font-size: 9px; margin-bottom: 15px; letter-spacing: 2px; }
.intro-tagline { font-weight: 500; font-size: 26px; letter-spacing: -.9px; line-height: 1.5; }
.quick-links { gap: 39px; }
.quick-links a { font-size: 11px; gap: 14px; }
.quick-links a > span { width: 61px; height: 61px; background: #fafbf8; border: 1px solid #edf0e9; }
.quick-links svg { width: 27px; height: 27px; stroke-width: 1.2; color: #4b5c4e; }
.quick-links a:hover > span { background: #f1f5ed; transform: translateY(-2px); }
.trust-note { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; color: #747b70; font-size: 10px; line-height: 1.6; }
.trust-note svg { width: 13px; height: 13px; opacity: .7; }
.trust-dot { width: 4px; height: 4px; background: #637859; border-radius: 50%; flex: 0 0 4px; }

.product-teaser { padding-block: 115px; gap: 76px; }
.teaser-copy h2 { font-size: 47px; font-weight: 500; line-height: 1.25; letter-spacing: -1.9px; }
.teaser-copy .eyebrow { margin-bottom: 24px; }
.teaser-copy p { font-size: 14px; line-height: 1.9; margin: 26px 0 31px; }
.text-link { min-height: 43px; font-size: 12px; gap: 34px; border-bottom-color: #52604b70; }
.text-link:hover { gap: 40px; }
.teaser-image { height: 500px; border-radius: 2px; background: #f5f4f0; }
.teaser-image > img { height: 100%; object-fit: contain; }
.image-caption { color: #747a6d; text-shadow: none; font-size: 8px; right: 23px; bottom: 21px; letter-spacing: 2px; }
.section-heading { margin-bottom: 37px; }
.section-heading .eyebrow { margin-bottom: 17px; }
.section-heading h2 { font-size: 32px; font-weight: 500; line-height: 1.35; letter-spacing: -1.1px; }
.section-heading p { font-size: 13px; line-height: 1.8; }
.section-index { font-size: 8px; letter-spacing: 1.8px; color: #9aa091; }

.film-section { padding-bottom: 108px; }
.featured-film { border-radius: 2px; }
.big-play { width: 63px; height: 63px; background: #ffffff0c; border-color: #ffffffb8; backdrop-filter: blur(4px); }
.big-play > span { border-top-width: 8px; border-bottom-width: 8px; border-left-width: 12px; }
.film-label { bottom: 34px; left: 34px; font-size: 8px; letter-spacing: 2px; gap: 11px; }
.film-label strong { font-size: 22px; font-weight: 450; }
.film-length { font-size: 10px; }
.secondary-film { padding-top: 24px; gap: 22px; }
.secondary-thumb { border-radius: 2px; }
.secondary-film strong { font-size: 15px; font-weight: 500; }
.secondary-film small { font-size: 9px; }
.secondary-action { font-size: 11px; gap: 20px; }

.kitchen-section { background: #fafbf8; padding-block: 88px 92px; border-top: 1px solid #eff1eb; border-bottom: 1px solid #eff1eb; }
.shorts-track { gap: 30px; }
.short-card { flex-basis: calc((100% - 60px) / 3); }
.short-media { border-radius: 2px; }
.short-card:hover .short-media > img { transform: scale(1.025); }
.short-category { font-size: 8px; letter-spacing: 1.8px; font-weight: 450; }
.short-play { width: 54px; height: 54px; background: #ffffff0a; border-color: #ffffffaa; }
.short-description { padding-top: 23px; gap: 10px; }
.short-description strong { font-size: 17px; font-weight: 500; }
.short-description small { font-size: 11px; line-height: 1.7; }

.media-section { padding-block: 113px 93px; }
.media-grid { gap: 34px; }
.media-image { border-radius: 2px; }
.media-image img { height: 310px; }
.media-broadcast .media-image img { object-position: center top; }
.media-image > span { font-size: 8px; letter-spacing: 1.8px; font-weight: 500; padding: 9px 11px; background: #fffffff0; }
.media-card-copy { padding-top: 26px; }
.media-card-copy small { font-size: 10px; color: #74806e; letter-spacing: .1px; }
.media-card-copy h3 { font-size: 22px; font-weight: 500; letter-spacing: -.65px; line-height: 1.45; margin-top: 11px; }
.media-card-copy p { font-size: 13px; color: #767c72; line-height: 1.85; margin-top: 14px; max-width: 450px; }
.media-card-copy > span { margin-top: 23px; font-size: 11px; color: #3e513d; gap: 22px; }
.creator-handle { font-style: normal; font-size: 10px; letter-spacing: .2px; color: #788072; }

.closing-banner { background: #fff; border-top: 1px solid var(--line); padding: 84px 24px 78px; }
.closing-brand { display: block; width: 177px; height: auto; margin: 0 auto 27px; }
.closing-banner .eyebrow { color: #88907e; font-weight: 400; font-size: 8px; letter-spacing: 2.5px; }
.closing-banner h2 { font-size: 33px; font-weight: 450; line-height: 1.4; letter-spacing: -1.1px; margin: 22px 0; }
.closing-banner .button-dark { padding: 7px 0 8px; min-height: 44px; gap: 34px; font-size: 11px; color: #33432f; background: transparent; border-bottom: 1px solid #52604b70; }
.closing-banner .button-dark:hover { background: transparent; color: #657b56; }
.site-footer { background: #fafbf8; padding-top: 40px; }
.footer-top { padding-bottom: 32px; }
.footer-top .brand img { width: 121px; }
.footer-top nav { font-size: 11px; gap: 29px; }
.footer-tagline { font-size: 10px; }
.footer-bottom { padding-top: 20px; font-size: 8px; letter-spacing: .6px; }
.back-to-top { width: 40px; height: 40px; box-shadow: none; }
.video-dialog { border-radius: 3px; }
.video-dialog-header { font-weight: 400; font-size: 12px; }

.product-subnav { background: #fafbf8; }
.product-subnav-inner { height: 61px; }
.product-subnav nav a { min-height: 44px; display: inline-flex; align-items: center; }
.product-hero { padding-block: 88px 98px; }
.product-hero h1 { font-size: 51px; font-weight: 500; line-height: 1.23; letter-spacing: -2px; }
.product-hero p { font-size: 14px; }
.product-hero-visual { border-radius: 2px; }
.fact-strip { background: #fafbf8; border-block: 1px solid #eef1e9; }
.fact-item strong { font-weight: 450; font-size: 27px; }
.story-block { padding-block: 98px; }
.story-image { border-radius: 2px; }
#features .story-image img { object-fit: contain; }
.story-copy h2 { font-weight: 500; font-size: 34px; line-height: 1.4; }
.story-copy p { font-size: 14px; }
.story-tags span { border-radius: 0; background: transparent; padding: 4px 0; border-bottom: 1px solid #dfe5d8; margin-right: 14px; }
.mode-list span { border-radius: 2px; background: #fafbf8; border-color: #eef1e9; }
.modes-section h2, .specs-layout h2, .faq-section h2 { font-weight: 500; }
.specs-section { background: #fafbf8; }
.spec-list > div { padding-block: 20px; }
.spec-note { font-size: 12px; }
.faq-section summary { font-size: 14px; min-height: 64px; }

@media (max-width: 1100px) {
  .page-width, .header-inner { width: calc(100% - 64px); }
  .header-inner { height: 82px; }
  .brand img { width: 139px; }
  .desktop-nav { gap: 27px; }
  .desktop-nav a { font-size: 12px; }
  .hero { height: 53vw; min-height: 475px; }
  .hero-copy { left: 32px; top: 25%; max-width: 470px; }
  .hero-copy h1 { font-size: 47px; letter-spacing: -2px; }
  .hero-bottom, .hero-progress { left: 32px; right: 32px; }
  .intro-tagline { font-size: 23px; }
  .quick-links { gap: 24px; }
  .product-teaser { gap: 48px; padding-block: 85px; }
  .teaser-copy h2 { font-size: 39px; }
  .teaser-image { height: 420px; }
  .section-heading h2 { font-size: 29px; }
  .shorts-track { gap: 21px; }
  .short-card { flex-basis: calc((100% - 42px) / 3); }
  .media-image img { height: 260px; }
  .media-card-copy h3 { font-size: 20px; }
  .story-copy h2 { font-size: 29px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 88px; }
  .page-width, .header-inner { width: calc(100% - 44px); }
  .header-inner { height: 72px; }
  .brand img { width: 128px; max-height: 42px; }
  .menu-toggle { width: 44px; height: 44px; }
  .mobile-nav:not([hidden]) { padding-inline: 22px; padding-bottom: 24px; }
  .mobile-nav a { min-height: 52px; display: flex; align-items: center; font-size: 14px; }

  /* Keep the complete CF frame visible; separate copy from video controls. */
  .hero { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; background: #fff; }
  .hero-video { height: auto; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
  .hero-shade { display: none; }
  .hero-copy { position: static; max-width: none; padding: 31px 22px 37px; color: #2b3a2e; }
  .hero-copy > span { font-size: 8px; letter-spacing: 2px; margin-bottom: 15px; }
  .hero-copy h1 { font-size: clamp(32px, 8.6vw, 39px); font-weight: 500; line-height: 1.27; letter-spacing: -1.6px; }
  .hero-copy > a { margin-top: 19px; font-size: 11px; min-height: 44px; padding-bottom: 5px; gap: 36px; }
  .hero-bottom { top: calc(56.25vw - 60px); bottom: auto; left: 12px; right: 12px; align-items: center; gap: 8px; }
  .hero-film-button { min-height: 44px; padding: 9px 12px; font-size: 10px; letter-spacing: -.15px; gap: 8px; flex-shrink: 0; }
  .hero-controls { padding: 0 4px; gap: 0; min-height: 44px; }
  .hero-controls button { width: 44px; height: 44px; }
  .hero-controls svg { width: 17px; height: 17px; }
  .hero-counter { font-size: 0; margin: 0 4px; }
  .hero-counter span { font-size: 8px; letter-spacing: 0; }
  .hero-progress { left: 13px; right: 13px; bottom: auto; top: calc(56.25vw - 6px); }

  .intro-strip { padding-block: 35px 39px; border-top: 1px solid #eef1e9; }
  .intro-copy .eyebrow { font-size: 8px; letter-spacing: 1.6px; margin-bottom: 12px; }
  .intro-tagline { font-size: 24px; font-weight: 500; line-height: 1.48; }
  .trust-note { font-size: 10px; margin-top: 15px; gap: 7px; }
  .trust-note svg { width: 12px; height: 12px; }
  .quick-links { margin-top: 31px; gap: 12px; }
  .quick-links a { min-height: 84px; font-size: 10px; gap: 12px; }
  .quick-links a > span { width: 53px; height: 53px; }
  .quick-links svg { width: 25px; height: 25px; }

  .product-teaser { padding-block: 62px 70px; gap: 31px; }
  .teaser-copy .eyebrow { font-size: 8px; letter-spacing: 1.8px; margin-bottom: 17px; }
  .teaser-copy h2 { font-size: 35px; line-height: 1.3; letter-spacing: -1.3px; }
  .teaser-copy p { font-size: 13px; line-height: 1.9; margin: 19px 0 20px; }
  .text-link { font-size: 11px; min-height: 44px; }
  .teaser-image { height: auto; aspect-ratio: 1 / 1; }
  .teaser-image > img { height: 100%; }
  .image-caption { font-size: 7px; right: 15px; bottom: 15px; }
  .section-heading { margin-bottom: 27px; }
  .section-heading .eyebrow { font-size: 8px; letter-spacing: 1.8px; margin-bottom: 14px; }
  .section-heading h2 { font-size: 25px; font-weight: 500; letter-spacing: -.8px; line-height: 1.4; }
  .film-section { padding-bottom: 65px; }
  .featured-film > img { aspect-ratio: 16 / 10; }
  .big-play { width: 54px; height: 54px; }
  .film-label { left: 18px; bottom: 22px; font-size: 7px; gap: 9px; letter-spacing: 1.4px; }
  .film-label strong { font-size: 15px; font-weight: 500; max-width: 230px; }
  .film-length { font-size: 8px; right: 16px; bottom: 23px; }
  .secondary-film { gap: 13px; padding-top: 21px; min-height: 84px; }
  .secondary-thumb { width: 92px; height: 62px; }
  .secondary-film strong { font-size: 12px; font-weight: 500; }
  .secondary-film small { font-size: 8px; }
  .secondary-action { font-size: 0; gap: 0; min-width: 24px; }

  .kitchen-section { padding-block: 61px 66px; }
  .shorts-track { gap: 17px; margin-right: -22px; padding-right: 22px; }
  .short-card { flex: 0 0 78%; }
  .short-description strong { font-size: 16px; }
  .short-description small { font-size: 11px; }
  .short-description { padding-top: 19px; }
  .carousel-controls button { width: 44px; height: 44px; }
  .carousel-controls { gap: 4px; }

  .media-section { padding-block: 68px 35px; }
  .media-grid { gap: 22px; }
  .media-image img { height: auto; aspect-ratio: 16 / 10; }
  .media-card-copy { padding-block: 22px 24px; }
  .media-card-copy small { font-size: 10px; }
  .media-card-copy h3 { font-size: 21px; line-height: 1.5; letter-spacing: -.65px; margin-top: 11px; }
  .media-card-copy p { font-size: 12px; line-height: 1.9; margin-top: 13px; }
  .media-card-copy > span { min-height: 44px; margin-top: 12px; font-size: 11px; }
  .creator-handle { font-size: 9px; }

  .closing-banner { padding: 62px 22px 65px; }
  .closing-brand { width: 150px; margin-bottom: 25px; }
  .closing-banner h2 { font-size: 29px; line-height: 1.4; margin: 19px 0 18px; letter-spacing: -1px; }
  .closing-banner .eyebrow { font-size: 7px; letter-spacing: 2px; }
  .closing-banner .button-dark { font-size: 11px; }
  .site-footer { padding-block: 34px 25px; }
  .footer-top { gap: 22px; padding-bottom: 23px; }
  .footer-top .brand img { width: 111px; }
  .footer-top nav { font-size: 10px; gap: 16px; }
  .footer-top nav a { min-height: 44px; display: flex; align-items: center; }
  .footer-tagline { font-size: 10px; }
  .footer-bottom { font-size: 8px; gap: 12px; flex-wrap: wrap; }
  .back-to-top { width: 44px; height: 44px; bottom: 16px; right: 15px; }
  .dialog-close { width: 44px; height: 44px; }
  .video-dialog-header { padding: 7px 12px; font-size: 11px; }

  .product-subnav-inner { height: 57px; font-size: 9px; gap: 12px; }
  .product-subnav nav { gap: 16px; }
  .product-subnav-inner strong { white-space: nowrap; font-size: 9px; }
  .product-hero { padding-block: 50px 57px; }
  .product-hero .eyebrow { font-size: 8px; letter-spacing: 1.8px; }
  .product-hero h1 { font-size: 38px; font-weight: 500; line-height: 1.28; letter-spacing: -1.5px; }
  .product-hero p { font-size: 13px; line-height: 1.9; }
  .product-hero-visual img { height: auto; aspect-ratio: 1 / 1; }
  .product-model { font-size: 9px; letter-spacing: 1.5px; }
  .fact-item strong { font-size: 20px; }
  .fact-item span { font-size: 9px; }
  .story-block, .story-block.reverse { padding-block: 58px; gap: 31px; }
  .story-copy h2 { font-size: 29px; font-weight: 500; }
  .story-copy p { font-size: 13px; }
  .story-image img { height: 300px; }
  .story-tags { margin-top: 20px; }
  .modes-section { padding-block: 61px; }
  .modes-section h2 { font-size: 25px; }
  .mode-list { gap: 9px; }
  .mode-list span { min-height: 44px; padding: 12px 14px; }
  .specs-section { padding-block: 57px; }
  .spec-list > div { font-size: 12px; grid-template-columns: 102px 1fr; }
  .spec-note { font-size: 11px; line-height: 1.9; }
  .faq-section { padding-block: 60px; }
  .faq-section h2 { font-size: 27px; }
  .faq-section summary { font-size: 13px; padding-block: 24px; }
  .faq-section summary::after { top: 20px; }
  .faq-section details p { font-size: 12px; }
}

@media (max-width: 359px) {
  .hero-film-button { font-size: 9px; padding-inline: 9px; }
  .hero-controls { padding-inline: 0; }
  .hero-counter { margin-inline: 2px; }
  .quick-links { gap: 5px; }
  .product-subnav nav { gap: 10px; }
  .product-subnav-inner strong { font-size: 8px; }
  .section-heading h2 { font-size: 23px; }
}