*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",sans-serif;color:#092f59}.wrap{width:min(1380px,calc(100% - 80px));margin:auto}.header{height:76px;background:#fff;border-bottom:1px solid #d7e5f0;position:relative;z-index:20}.header-row{height:100%;display:grid;grid-template-columns:370px 1fr auto;align-items:center;gap:30px}.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:#092f59}.house{width:43px;height:43px;flex:0 0 43px;overflow:visible}.house path{fill:none;stroke-linecap:round;stroke-linejoin:round}.house .logo-roof{stroke:#1f3a5f;stroke-width:6}.house .logo-frame{stroke:#1f3a5f;stroke-width:4}.house .logo-brace{stroke:#e8792b;stroke-width:4}.logo-text b,.logo-text small{display:block}.logo-text b{font-size:19px}.logo-text small{font-size:9px;color:#647c91}.dev{border:1px solid #1688ef;color:#1688ef;border-radius:6px;padding:5px 8px;font-size:11px;font-weight:800}.header nav{display:flex;justify-content:center;gap:35px}.header nav a{text-decoration:none;color:#092f59;font-weight:800;font-size:14px}.orange{display:inline-block;background:#ff5b0b;color:white;text-decoration:none;font-weight:800;border-radius:6px;padding:17px 27px;box-shadow:0 7px 18px #ff5b0b25}.head-cta{font-size:13px}.hero{height:590px;position:relative;overflow:hidden;background:#f7fbff}.hero-bg{position:absolute;inset:0 0 0 34%;background:url("assets/hero-photo-scaffold-logo.png") center/cover no-repeat}.fade{position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fff 22%,rgba(255,255,255,.98) 31%,rgba(255,255,255,.88) 38%,rgba(255,255,255,.64) 44%,rgba(255,255,255,.30) 50%,rgba(255,255,255,.08) 56%,rgba(255,255,255,0) 61%)}.hero-content{height:100%;position:relative;z-index:3;display:flex;align-items:center}.copy{width:52%;max-width:650px}.eyebrow{font-size:14px;color:#1284eb;font-weight:800;margin:0 0 18px}.hero h1{font-size:51px;line-height:1.18;margin:0 0 24px;letter-spacing:-.025em}.hero h1 em{font-style:normal;color:#1284eb}.lead{font-size:16px;line-height:1.9;margin:0}.actions{display:flex;align-items:center;gap:28px;margin-top:25px}.more{color:#1284eb;text-decoration:none;font-weight:800}.note{font-size:10px;color:#667e91;margin:13px 0 0}.slogan{width:420px;background:#082f59;color:#fff;padding:18px 23px;border-radius:6px;display:grid;gap:7px;margin-top:24px}.slogan b{font-size:18px}.slogan span{font-size:12px}.ui{position:absolute;z-index:5;right:5%;bottom:0;width:43%;height:auto;max-height:310px;object-fit:cover;object-position:center top;border:0}.features{background:#fff;border-top:1px solid #e0eaf2}.feature-row{display:grid;grid-template-columns:repeat(5,1fr)}.feature-row article{min-height:110px;padding:22px 20px;display:grid;grid-template-columns:50px 1fr;gap:13px;align-items:start;border-right:1px solid #dce7f0}.feature-row article:last-child{border-right:0}.feature-row svg{width:37px;height:37px;fill:#1284eb;stroke:#1284eb;stroke-width:2;stroke-linejoin:round}.feature-row svg .white{fill:none;stroke:#fff;stroke-width:2}.feature-row h3{font-size:14px;margin:2px 0 7px}.feature-row p{font-size:11px;line-height:1.55;color:#60778b;margin:0}@media(max-width:1000px){.header nav{display:none}.header-row{grid-template-columns:1fr auto}.hero h1{font-size:42px}.ui{width:45%}.feature-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.wrap{width:min(100% - 28px,1380px)}.logo-text small,.dev{display:none}.hero{height:700px}.hero-bg{inset:350px 0 0}.fade{background:linear-gradient(180deg,#fff 0%,#fff 44%,rgba(255,255,255,.7) 57%,rgba(255,255,255,0) 75%)}.hero-content{align-items:flex-start;padding-top:40px}.copy{width:100%}.hero h1{font-size:36px}.lead br{display:none}.ui{right:4%;width:92%;bottom:0;max-height:220px}.feature-row{grid-template-columns:1fr}.head-cta{padding:10px;font-size:10px}}
/* v0.7.1 corrections */
.ui{display:none!important}
.feature-row article{grid-template-columns:52px 1fr!important;gap:14px!important}
.ficon{width:44px;height:44px;display:grid;place-items:center}
.ficon svg{width:42px;height:42px;fill:#1185ed;stroke:#1185ed;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.ficon svg .hole,.ficon svg .cut{fill:#fff;stroke:#fff}
.ficon.calcicon svg{width:37px;height:42px}
.available-icon svg .quantity-label{fill:#fff;stroke:none;font-size:12px;font-weight:800;font-family:"Noto Sans JP","Yu Gothic",sans-serif}

/* PC layout matched to the approved 1920px composition. The photo already
   contains both product screens, so no separate screen overlay is rendered. */
@media (min-width:1001px){
  html,body{max-width:100%;overflow-x:hidden}
  .wrap{width:min(1740px,calc(100% - 180px))}
  .header{height:98px}
  .header-row{grid-template-columns:470px minmax(0,1fr) auto;gap:28px}
  .logo{gap:14px;white-space:nowrap}
  .house{transform:scale(1.25);transform-origin:left center;margin-right:9px}
  .logo-text b{font-size:29px;line-height:1.15}
  .logo-text small{font-size:11px;margin-top:5px}
  .dev{font-size:13px;padding:5px 9px}
  .header nav{gap:34px;white-space:nowrap}
  .header nav a{font-size:17px}
  .head-cta{font-size:19px;padding:21px 32px}
  .hero{height:850px}
  .hero-bg{inset:0 0 0 34.8%;background-size:auto 100%;background-position:left center}
  .fade{background:linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,.99) 40%,rgba(255,255,255,.93) 43%,rgba(255,255,255,.74) 46%,rgba(255,255,255,.25) 51%,rgba(255,255,255,0) 57%)}
  .hero-content{align-items:flex-start;padding-top:73px}
  .copy{width:990px;max-width:none}
  .eyebrow{font-size:23px;margin-bottom:18px}
  .hero h1{font-size:66px;line-height:1.27;letter-spacing:-.025em;margin-bottom:23px;white-space:nowrap}
  .lead{font-size:27px;line-height:1.72}
  .actions{gap:30px;margin-top:32px}
  .actions .orange{font-size:27px;padding:23px 74px}
  .more{font-size:22px;white-space:nowrap}
  .note{font-size:16px;margin-top:20px;white-space:nowrap}
  .slogan{width:640px;min-height:140px;padding:25px 43px;gap:7px;margin-top:48px;border-radius:9px}
  .slogan b{font-size:29px}
  .slogan span{font-size:21px}
  .feature-row article{min-height:250px;padding:29px 12px 18px!important;display:block;border-right:1px solid #dce7f0}
  .feature-row article:first-child{padding-left:12px!important}
  .ficon{width:65px;height:62px;margin:0 0 5px 38px}
  .ficon svg{width:62px;height:62px;stroke-width:2.3}
  .ficon.calcicon svg{width:54px;height:62px}
  .feature-row h3{font-size:clamp(17px,1.35vw,26px);line-height:1.2;margin:0 0 9px;white-space:normal}
  .feature-row p{font-size:clamp(15px,1.3vw,20px);line-height:1.42;color:#173c64}
}

/* Keep the longer product name and navigation clear on laptop widths. */
@media (min-width:1001px) and (max-width:1500px){
  .wrap{width:min(1380px,calc(100% - 64px))}
  .header-row{grid-template-columns:390px minmax(0,1fr) auto;gap:18px}
  .logo-text b{font-size:22px}
  .logo-text small{font-size:9px}
  .dev{display:none}
  .header nav{gap:18px}
  .header nav a{font-size:14px}
  .head-cta{font-size:15px;padding:18px 22px}
}

/* Keep the house roof, body and inner mark in one coordinate system. */
.logo svg.house{display:block;flex:none;width:38px;height:38px;border:0;border-radius:0;position:static;stroke:#1488ee;fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.logo svg.house::before{content:none}
@media (min-width:1001px){
  .logo{gap:12px}
  .logo svg.house{width:64px;height:64px;transform:none;margin:0;stroke-width:3.5}
}

/* Keep the navigation pinned even when the body clips horizontal overflow. */
body{padding-top:76px}
.header{position:fixed;top:0;left:0;right:0;width:100%;z-index:1000}
@media (min-width:1001px){body{padding-top:98px}}