/* Version: 1.1 | Updated: 2026-10-20 */
/* Hoursight help site (PKG-007 K-05), published styles. Taken from the approved prototype design/mockups/current/site/site.css 1.9
   (DESIGN v4.14 section 2.7, v4.15 text) with the review layer removed: no placeholder chip, no to-verify marks or notes, no
   appearance switch (light and dark follow prefers-color-scheme only), no "mailbox not ready" note. System fonts only; nothing is
   loaded from third parties. Layout, colours and motion are unchanged. */
:root{
  --bg:#f2f3ef;--paper:#fafbf9;--ink:#272827;--muted:#5c5f5d;--line:#dce0dd;--hair:#2728271a;
  --teal:#0c7079;--teal-ink:#0a5d66;--teal-soft:#e1eff1;--on-teal:#fff;
  --blk-regular:#748789;--blk-cont:#0c7079;--track:#e6e9e4;
  --btn-bg:#eeefeb;--btn-edge:#d5d9d4;--dis-bg:transparent;--dis-edge:#c4c9c3;--dis-ink:#5c5f5d;
  --shadow:0 1px 2px #1d262814,0 8px 24px #1d26280f;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC","Hiragino Sans",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --rail:220px;--gutter:56px;--measure-wide:756px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1f2020;--paper:#2a2c2c;--ink:#e6e7e4;--muted:#a3a7a5;--line:#3e4241;--hair:#ffffff1f;
  --teal:#48b7c2;--teal-ink:#7fd0d8;--teal-soft:#213a3d;--on-teal:#0d1f21;
  --blk-regular:#728486;--blk-cont:#48b7c2;--track:#333636;
  --btn-bg:#343736;--btn-edge:#4a4e4d;--dis-bg:transparent;--dis-edge:#4a4e4d;--dis-ink:#a3a7a5;
  --shadow:0 1px 2px #0000004d,0 10px 30px #00000040;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
/* Language fonts only where a lang attribute is set (the page root and language names); descendants inherit, so classes such as the time axis keep their own font. */
[lang|="ja"]{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","SF Pro Text",sans-serif}
[lang|="zh"]{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","SF Pro Text",sans-serif}
/* Japanese line breaking: no small kana or prolonged mark at a line start; phrases kept whole where the browser can find them. */
html:lang(ja){line-break:strict;word-break:auto-phrase}
html:lang(ja) :is(h1,h2,.lead,.terms-lead,.faq summary span,.summary strong,.toc a span:not(.idx)){word-break:keep-all;word-break:auto-phrase}
:is(h1,h2,.lead,.terms-lead){text-wrap:balance}
a{color:var(--teal);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
.nb{white-space:nowrap}
.site-nav a,.footer-links a{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-48px;background:var(--paper);padding:8px 12px;border-radius:8px;z-index:20}.skip:focus{top:10px}
.bar{max-width:1080px;margin:0 auto;padding:0 24px}
.ext{font-size:.9em;margin-left:2px}
.idx{font-family:var(--mono);font-size:.72em;font-weight:500;color:var(--teal);letter-spacing:.02em;margin-right:12px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--teal);margin:0 0 14px}
.lead{font-size:18px;line-height:1.7;color:var(--muted);margin:0}
.quiet{color:var(--muted);font-size:14px}
/* Header */
.site-header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;gap:28px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:17px}
.brand img{width:32px;height:32px}
.site-nav{display:flex;gap:22px;margin-left:auto;font-size:14px}
.site-nav a{color:var(--muted);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--teal);font-weight:600}
.lang-switch{display:flex;align-items:center;font-size:13px;border:1px solid var(--line);border-radius:999px;padding:2px}
.lang-switch>*{padding:3px 10px;border-radius:999px;white-space:nowrap}
.lang-switch a{color:var(--muted);text-decoration:none}.lang-switch a:hover{color:var(--ink)}
.lang-current{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 0 0 .5px var(--hair)}
main{display:block;max-width:1080px;margin:0 auto;padding:0 24px 72px}
/* Help hero with the day ruler */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:64px 0 56px}
h1{font-size:44px;line-height:1.15;font-weight:650;margin:0 0 18px}
:lang(ja) h1,:lang(zh-Hans) h1{font-size:40px;line-height:1.25}
.ruler{margin:0;background:var(--paper);border-radius:13px;box-shadow:0 0 0 .5px var(--hair),var(--shadow);padding:26px 24px 20px}
.ruler-track{position:relative;height:34px;background:var(--track);border-radius:7px;overflow:hidden}
.blk{position:absolute;top:6px;bottom:6px;border-radius:4px;transform-origin:left center}
.blk-c{background:var(--blk-cont)}.blk-b{background:var(--blk-regular)}
.blk-s{background:repeating-linear-gradient(135deg,var(--muted) 0 1.5px,transparent 1.5px 5px);opacity:.55}
.ruler-axis{position:relative;height:22px;margin-top:6px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.ruler-axis span{position:absolute;top:0;transform:translateX(-2px)}
.ruler-axis span:before{content:'';position:absolute;left:2px;top:-6px;width:1px;height:5px;background:var(--line)}
.ruler-legend{list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px;margin:2px 0 0;padding:0;font-size:12px;color:var(--muted)}.ruler-legend li{display:flex;align-items:center;gap:6px}.ruler-legend i{display:inline-block;width:14px;height:8px;border-radius:2px}
.ruler figcaption{font-size:14px;color:var(--muted);margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
/* Help body: a vertical tick rail for the table of contents */
.help-layout{display:grid;grid-template-columns:var(--rail) minmax(0,var(--measure-wide));gap:var(--gutter);border-top:1px solid var(--line);padding-top:40px}
.doc-layout{border-top:0;padding-top:0}
.toc{position:sticky;top:94px;align-self:start}
.toc-title{font-size:12px;color:var(--muted);margin:0 0 10px;font-weight:600}
.toc ol{list-style:none;margin:0;padding:0 0 0 14px;border-left:1px solid var(--line)}
.toc li{position:relative;margin:0}
.toc li:before{content:'';position:absolute;left:-14px;top:50%;width:8px;height:1px;background:var(--line)}
.toc a{display:flex;align-items:baseline;padding:6px 0;color:var(--ink);text-decoration:none;font-size:14px}.toc .idx{flex:none}
.toc a:hover .idx{color:var(--teal-ink)}
.faq-group{margin:0 0 44px;scroll-margin-top:90px}
.faq-group h2{font-size:22px;line-height:1.3;font-weight:650;margin:0 0 6px;display:flex;align-items:baseline}
.faq{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;gap:16px;justify-content:space-between;list-style:none;cursor:pointer;padding:16px 0;font-size:17px;font-weight:550;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover span{color:var(--teal-ink)}
.faq-mark{position:relative;flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
.faq-mark:before,.faq-mark:after{content:'';position:absolute;left:6px;right:6px;top:10.5px;height:1px;background:var(--ink);transition:transform .18s ease}
.faq-mark:after{transform:rotate(90deg)}
.faq[open] .faq-mark:after{transform:rotate(0)}
.faq[open] .faq-mark{box-shadow:inset 0 0 0 1px var(--teal)}
.faq-a{padding:0 38px 20px 0}
.faq-a p{margin:0;line-height:1.8}
.more{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:8px;padding:24px 26px;background:var(--paper);border-radius:13px;box-shadow:0 0 0 .5px var(--hair),var(--shadow);border-left:3px solid var(--teal)}
.more h2{font-size:18px;margin:0 0 4px}.more p{margin:0;color:var(--muted);font-size:15px}
/* Buttons */
.button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 18px;border-radius:9px;border:1px solid var(--btn-edge);background:var(--btn-bg);color:var(--ink);font:inherit;font-size:15px;font-weight:550;text-decoration:none;cursor:pointer;white-space:nowrap}
.button.primary{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.button.primary:hover{text-decoration:none;filter:brightness(1.06)}
.button:disabled{background:var(--dis-bg);border:1px solid var(--dis-edge);color:var(--dis-ink);cursor:not-allowed;filter:none}
/* Documents (privacy, terms, contact) */
.doc-head{padding:64px 0 28px;max-width:var(--measure-wide)}
.doc-meta{font-size:14px;color:var(--muted);margin:0}
.summary{max-width:var(--measure-wide);background:var(--paper);border-radius:13px;box-shadow:0 0 0 .5px var(--hair),var(--shadow);padding:22px 26px 8px;margin:0 0 48px}
.summary-label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--teal);margin:0 0 6px;font-weight:500}
.summary ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.summary li{display:flex;flex-direction:column;gap:3px;padding:14px 0 16px;border-top:1px solid var(--line)}
.summary li:nth-child(-n+2){border-top:0}
.summary li:last-child:nth-child(odd){grid-column:1/-1}
.summary strong{font-size:17px;font-weight:650}
.summary span{font-size:14px;color:var(--muted);line-height:1.65}
.doc-body{max-width:var(--measure-wide)}
.policy-sec{padding:0 0 30px;margin:0 0 30px;border-bottom:1px solid var(--line)}
.policy-sec:last-child{border-bottom:0}
.policy-sec h2{font-size:20px;margin:0 0 12px;display:flex;align-items:baseline}
.policy-sec p{margin:0 0 12px;line-height:1.85}
.policy-sec ul{margin:0 0 12px;padding:0;list-style:none}
.policy-sec li{position:relative;padding-left:22px;margin:0 0 8px;line-height:1.75}
.policy-sec li:before{content:'';position:absolute;left:2px;top:.62em;width:9px;height:6px;border-radius:2px;background:var(--blk-cont)}
.terms-card{max-width:var(--measure-wide);background:var(--paper);border-radius:13px;box-shadow:0 0 0 .5px var(--hair),var(--shadow);padding:32px 34px 26px;margin:0 0 40px}
.terms-lead{font-size:20px;line-height:1.65;margin:0 0 24px;font-weight:500}
.terms-url{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:16px 0 0;font-size:13px;color:var(--muted)}
.terms-url code{font-family:var(--mono);font-size:12px;overflow-wrap:anywhere}
.terms-points{max-width:var(--measure-wide);margin:0;display:grid;gap:0}
.terms-points div{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:18px 0;border-top:1px solid var(--line)}
.terms-points dt{font-weight:650}.terms-points dd{margin:0;line-height:1.8}
.mail-card{max-width:var(--measure-wide);background:var(--paper);border-radius:13px;box-shadow:0 0 0 .5px var(--hair),var(--shadow);padding:28px 32px;margin:16px 0 44px}
.mail-label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--teal);margin:0 0 8px}
.mail-address{font-size:26px;margin:0 0 22px;line-height:1.3}
.mail-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:var(--measure-wide)}
.contact-grid h2{font-size:18px;margin:0 0 12px}
.contact-grid p{line-height:1.8}
.ticks{list-style:none;margin:0 0 16px;padding:0}
.ticks li{position:relative;padding-left:22px;margin:0 0 8px;line-height:1.7}
.ticks li:before{content:'';position:absolute;left:2px;top:.62em;width:9px;height:6px;border-radius:2px;background:var(--blk-cont)}
/* Left aside on terms and contact (same column as the contents rail). */
.doc-aside{position:sticky;top:94px;align-self:start}
.aside-meta{margin:0}.aside-meta div{padding:10px 0;border-top:1px solid var(--line)}.aside-meta div:first-child{border-top:0;padding-top:0}
.aside-meta dt{font-size:12px;color:var(--muted);font-weight:600}.aside-meta dd{margin:2px 0 0;font-size:14px;line-height:1.6}
.aside-title{font-size:14px;font-weight:650;margin:0 0 10px}
.doc-aside .ticks li{font-size:14px}
.contact-apple h2{font-size:18px;margin:0 0 10px}.contact-apple p{line-height:1.8}
/* Footer */
.site-footer{border-top:1px solid var(--line);padding:26px 0 40px;font-size:13px;color:var(--muted)}
.site-footer .bar{display:grid;grid-template-columns:1fr auto;gap:8px 32px}
.footer-note{margin:0;grid-column:1/-1}
.footer-links{display:flex;gap:18px}.footer-links a{color:var(--muted)}
.footer-made{margin:0;grid-row:2;grid-column:1}
/* Root language page */
.page-root{display:grid;min-height:100vh;place-items:center}
.root-main{padding:48px 24px;text-align:center;max-width:520px}
.root-main h1{font-size:34px;margin:14px 0 28px}
.root-langs{list-style:none;margin:0;padding:0;text-align:left;background:var(--paper);border-radius:13px;box-shadow:0 0 0 .5px var(--hair),var(--shadow)}
.root-langs li+li{border-top:1px solid var(--line)}
.root-langs a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:16px 22px;color:var(--ink);text-decoration:none}
.root-langs strong{font-size:17px}.root-langs span{grid-row:2;font-size:13px;color:var(--muted)}.root-langs i{grid-row:1/3;align-self:center;font-style:normal;color:var(--teal)}
.root-langs a:hover strong{color:var(--teal-ink)}
/* Page-load motion: text rises in, then the day's blocks fill from the left. */
@media (prefers-reduced-motion:no-preference){
  .hero-text>*,.doc-head>*{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
  .hero-text>:nth-child(2),.doc-head>:nth-child(2){animation-delay:.06s}.hero-text>:nth-child(3),.doc-head>:nth-child(3){animation-delay:.12s}
  .blk{animation:fill .55s cubic-bezier(.2,.7,.2,1) both}
  .blk:nth-child(2){animation-delay:.08s}.blk:nth-child(3){animation-delay:.16s}.blk:nth-child(4){animation-delay:.24s}.blk:nth-child(5){animation-delay:.32s}.blk:nth-child(6){animation-delay:.4s}.blk:nth-child(7){animation-delay:.48s}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
/* Narrow screens: one column; the contents rail becomes a row of chips. */
@media (max-width:820px){
  .bar,main{padding-left:16px;padding-right:16px}
  .site-header .bar{flex-wrap:wrap;gap:6px 18px;padding-top:10px;padding-bottom:8px}
  .site-nav{order:3;width:100%;margin-left:0;gap:14px;overflow-x:auto;font-size:13px}
  .lang-switch{margin-left:auto}
  .hero{grid-template-columns:1fr;gap:32px;padding:40px 0 36px}
  h1{font-size:34px}:lang(ja) h1,:lang(zh-Hans) h1{font-size:32px}
  .help-layout{grid-template-columns:1fr;gap:20px;padding-top:24px}
  .toc{position:static}.toc ol{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0}.toc li:before{display:none}
  .toc a{padding:4px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px}
  .faq-a{padding-right:0}
  .more{flex-direction:column;align-items:flex-start}
  .summary ul{grid-template-columns:1fr}.summary li:nth-child(2){border-top:1px solid var(--line)}
  .help-layout,.doc-layout{grid-template-columns:1fr}
  .doc-aside{position:static}.contact-layout .doc-aside{order:2}
  .terms-points div{grid-template-columns:1fr;gap:4px}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .doc-head{padding-top:40px}
  .site-footer .bar{grid-template-columns:1fr}.footer-links{flex-wrap:wrap;gap:6px 18px}.footer-made{grid-row:auto}
}