/* Product content within the existing UCL navigation and Opal field. */
:root{--bg:#fcfcfd;--paper:#ffffff55;--text:#515a68;--muted:#596575;--soft:#788396;--line:#74829926;--blue:#536b94;--max:1000px;--header:63px;--gutter:28px;--shadow:0 22px 55px -22px #3c45504a,0 1px 4px #3b40521c}
html{background:#fcfcfd;scroll-padding-top:calc(var(--header) + 24px);scroll-padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
body{position:relative;isolation:isolate;background:transparent;color:var(--text);padding-top:calc(var(--header) + env(safe-area-inset-top,0px));font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}
html:lang(ja) body{font-family:Meiryo,"メイリオ",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;line-break:strict;word-break:normal;overflow-wrap:break-word}
.ucl-ambient{position:fixed;z-index:-2;inset:0;pointer-events:none;background:radial-gradient(ellipse at 13% 24%,#bfdbfa 0,transparent 55%),radial-gradient(ellipse at 86% 79%,#e3c5ed 0,transparent 52%),radial-gradient(ellipse at 51% 95%,#f5e7c7 0,transparent 45%),#fcfcfd}
.ucl-ambient canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease}
.ucl-ambient[data-ready] canvas{opacity:.72}
.site-watermark{z-index:-1;opacity:.25}
.site-header.ucl-header{z-index:100;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-header.is-scrolled{box-shadow:0 1px 0 #ffffff12}
.language-switch a{text-decoration:none}
.global-nav{z-index:100}
.global-link[aria-current="true"]{background:#ffffff1c;box-shadow:inset 0 0 0 1px #ffffff14}
body::after{content:'';position:fixed;z-index:90;inset:auto 0 0;height:130px;background:linear-gradient(#fcfcfd00,#fcfcfde8 65%,#fcfcfd);pointer-events:none}
.product-context,.section-inner,.hero-grid,.footer-inner{width:min(calc(100% - 2*var(--gutter)),var(--max));margin-inline:auto}
.product-context{padding-top:28px}
.product-breadcrumb{display:flex;gap:10px;align-items:center;font-size:11px;color:#728096;line-height:1.5;min-height:28px}
.product-breadcrumb a{padding-block:8px;text-underline-offset:4px}
.product-breadcrumb a:hover{text-decoration:underline}
.product-breadcrumb [aria-current]{color:#566174}
.product-brand{display:inline-flex;align-items:center;gap:12px;min-height:52px;margin-top:20px;font-size:26px;letter-spacing:-.04em;font-weight:500;line-height:1.3}
.product-brand img{width:42px;height:42px;border-radius:11px;box-shadow:0 5px 16px #53627620}
.product-toc{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:14px;padding-bottom:13px;border-bottom:1px solid var(--line);font-size:11px;color:#6b788b}
.product-toc a{display:flex;align-items:center;min-height:40px;text-underline-offset:5px}
.product-toc a:hover{text-decoration:underline}
.hero{padding-block:38px 68px}
.hero-grid{gap:60px}
.hero .eyebrow{margin-bottom:16px;color:#728096;font-size:12px;font-weight:400}
.hero h1,html[lang="en"] .hero h1{font-weight:450;font-size:clamp(30px,4.2vw,49px);line-height:1.4;letter-spacing:-.025em}
html:lang(ja) .hero h1{letter-spacing:.005em}
.hero-lead{font-size:15px;line-height:1.95;margin-top:20px}
.hero-actions{gap:12px;margin-top:23px}
.button-primary{color:#fff;background:#465267;border:1px solid #ffffff42;border-radius:11px;font-weight:500;font-size:13px}
.button-primary:hover{background:#354056}
.app-store-download{padding:12px;border-radius:8px}
.app-store-download img{height:48px}
.platform-line{font-size:10px;letter-spacing:.01em}
.app-window{width:300px;border-radius:16px}
.experience,.everyday,.privacy,.company,.support,.site-footer{background:transparent}
.section{border-top:0;padding-block:64px}
.section>.section-inner{border-top:1px solid var(--line);padding-top:32px}
.section h2,.story-landing h3{font-weight:450;color:#515a68}
html:lang(ja) :is(.section h2,.story-landing h3,.pain-card h3){letter-spacing:.005em}
.section-number{font-weight:500;letter-spacing:.12em;font-size:10px}
.pain-card{border-top-width:1px}
.pain-index{color:#7d879c;font-weight:400}
.policy-shell{background:#ffffff40;border-color:#ffffffa6}
.menubar-journey,.appearance-pair{background:#e8eaf255}
.story-app-shot img{box-shadow:var(--shadow)}
.company-logo{width:100%;max-width:440px;height:auto}
.scroll-story{--story-ink:#4e596a;--story-muted:#6b788b;--story-track:#d4ddea;--story-blue:#638bc5;--story-aqua:#327d82;background:#ffffff40;border-block:1px solid #ffffff90}
.work-story{--story-ink:#4e596a;--story-muted:#6b788b;--story-track:#d4ddea;--story-blue:#638bc5;--story-aqua:#536b94;background:#edf0f64d}
.pace-result p{color:#4b6c73}
.work-dossier{background:#ffffffc7}
.story-title{font-weight:450}
.is-enhanced .story-sticky{top:calc(var(--header) + env(safe-area-inset-top,0px));height:calc(100svh - var(--header) - 115px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding-block:16px}
.is-enhanced .story-topline{margin-bottom:20px}
.is-enhanced .story-bottom{margin-top:20px}
.site-footer{padding-bottom:calc(160px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
@media(min-width:768px){:root{--header:71px;--gutter:40px}.product-context{padding-top:35px}.product-brand{font-size:30px}.product-toc{font-size:12px;gap:0 28px}.hero{padding-top:38px}.hero-grid{min-height:500px}.hero .app-window{width:300px}.hero-lead{font-size:16px}}
@media(max-width:767px){
  p,h1,h2,h3{text-wrap:wrap}
  .product-context,.section-inner,.hero-grid,.footer-inner,.story-inner{width:calc(100% - 2*var(--gutter));max-width:none}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero{padding-top:28px;padding-bottom:40px}
  .hero h1,html[lang="en"] .hero h1{font-size:clamp(29px,7.6vw,34px);line-height:1.45}
  .hero-lead{font-size:14px;line-height:1.9;margin-top:14px}
  .hero .eyebrow{font-size:11px;margin-bottom:13px}
  .hero-actions{gap:12px;margin-top:21px;flex-wrap:wrap}
  .button-primary{min-height:44px;padding:10px 14px;font-size:12px;gap:10px}
  .app-store-download{padding:10px}
  .app-store-download img{height:40px}
  .platform-line{font-size:10px;gap:8px;line-height:1.65;margin-top:16px}
  .platform-line span{white-space:nowrap}
  .app-stage{padding:0}
  .app-window{width:min(100%,274px);border-radius:14px}
  .section{padding-block:34px}
  .section h2,.story-landing h3{font-size:24px;line-height:1.65}
  .section-intro,.pain-card p,.bridge p,.behavior-copy p,.story-landing-copy>p{font-size:14px;line-height:1.95}
  .pain-card{display:block}
  .pain-index{margin:0 0 9px}
  .pain-card h3{margin-bottom:10px;font-size:18px}
  .bridge-mark{display:none}
  .privacy-promises{grid-template-columns:1fr}
  .policy-shell{padding:24px 0;background:transparent;border-radius:0;border-inline:0;border-color:var(--line)}
  .policy-item p{font-size:14px;line-height:1.95}
  .company-row{display:block}
  .company-row dt{margin-bottom:5px}
  .company-row dd{margin:0}
  .support-panel p,.support-list{font-size:14px}
  .support-email{font-size:14px;overflow-wrap:anywhere}
  .story-headlines{min-height:140px}
  .story-title{font-size:26px;line-height:1.5}
  /* Keep both scroll narratives inside the space between the shared menus. */
  .is-enhanced .story-sticky{padding-block:16px}
  .is-enhanced .story-topline{margin-bottom:14px}
  .is-enhanced .story-headlines{min-height:114px;margin-bottom:12px}
  .is-enhanced .story-title{line-height:1.4}
  .is-enhanced .story-bottom{margin-top:14px}
}
@media(max-width:767px) and (max-height:780px){
  .is-enhanced .story-sticky{padding-block:12px}
  .is-enhanced .story-topline{margin-bottom:8px;font-size:11px}
  .is-enhanced .story-headlines{min-height:84px;margin-bottom:8px}
  .is-enhanced .story-title{font-size:22px;line-height:1.25}
  .is-enhanced .story-bottom{margin-top:10px;font-size:10px}
  .is-enhanced .pace-diagram,.is-enhanced .work-diagram{height:228px}
  .is-enhanced .pace-metric{height:66px;padding-top:16px}
  .is-enhanced .pace-metric strong{font-size:40px}
  .is-enhanced .pace-metric>span{font-size:12px}
  .is-enhanced .pace-time{top:94px}
  .is-enhanced .pace-time .pace-metric{height:34px;padding-top:0}
  .is-enhanced .pace-time strong{font-size:28px}
  .is-enhanced .quota-guide{top:76px;height:87px}
  .is-enhanced .time-guide{top:138px;height:25px}
  .is-enhanced .pace-axis{top:141px;font-size:10px}
  .is-enhanced .pace-distance{top:162px}
  .is-enhanced .pace-result{top:178px;gap:10px}
  .is-enhanced .pace-result strong{font-size:34px}
  .is-enhanced .pace-gap-value>span{font-size:10px;margin-bottom:3px}
  .is-enhanced .pace-result p{font-size:11px;line-height:1.5}
  .is-enhanced .work-dossier{height:calc(48px + 180px * var(--expand))}
  .is-enhanced .work-selected{height:48px;padding-inline:14px;gap:8px}
  .is-enhanced .work-hour{width:calc(92px + 24px * var(--expand));font-size:calc(12px + 3px * var(--expand))}
  .is-enhanced .work-others{top:55px;inset-inline:14px}
  .is-enhanced .work-period{height:47px;gap:8px;font-size:11px}
  .is-enhanced .work-period>span:first-child{width:92px}
  .is-enhanced .work-tasks{top:48px;inset-inline:14px}
  .is-enhanced .work-context{padding-top:9px;font-size:10px}
  .is-enhanced .work-task{padding-block:8px;gap:10px}
  .is-enhanced .work-task h3{font-size:14px;line-height:1.3}
  .is-enhanced .work-task p{font-size:11px;line-height:1.4}
  .is-enhanced .work-tasks-cue{font-size:10px;margin-top:5px;line-height:1.4}
}
@media(max-width:350px){:root{--gutter:22px}.product-toc{gap:0 13px;font-size:10px}.product-brand{font-size:25px}.hero-actions{gap:10px}.button-primary{padding-inline:10px;font-size:11px}.platform-line{gap:5px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.ucl-ambient canvas{transition:none}}
/* Desktop shares the corporate header/footer without changing Apple URLs. */
@media(min-width:1100px){
  :root{--header:76px}
  body::after{display:none}
  html{scroll-padding-bottom:32px}
  .is-enhanced .story-sticky{height:calc(100svh - var(--header));padding-block:28px}
  .site-watermark{display:none}
}