/* Mac 版の配布ページ（mac.html）専用。構図は生成案A（MacBook の絵・淡い虹のアーチ・紫の大きなボタン・3枚の手順カード）。
   MacBook の枠は CSS で描き、画面にはアプリの実物のスクショ（assets/mac/app-screen.webp）を入れる。色は paper テーマのトークンだけを使う。
   光るものはダウンロードボタンの影と虹のアーチの2つだけ。動きは入れない。 */

.mac-hero{padding-block:36px 8px;text-align:center}
.mac-hero__head .eyeline{margin:0 0 6px;font-weight:700;color:var(--accent)}
.mac-hero .section-head h1,.mac-hero h1{margin:0;font-size:clamp(28px,4.2vw,50px);line-height:1.4;letter-spacing:-.03em;font-weight:800}
.mac-hero h1::after{content:"";display:block;width:min(440px,72%);height:6px;margin:16px auto 0;border-radius:var(--r-pill);background:var(--brand-rainbow)}

/* 虹のアーチ（背面）と MacBook */
.mac-stage{position:relative;isolation:isolate;margin:40px auto 0;padding-top:4%;overflow-x:clip}
.mac-rainbow{position:absolute;z-index:-1;left:0;right:0;top:0;bottom:-6%;pointer-events:none;opacity:.8;
  background:radial-gradient(ellipse 50% 98% at 50% 100%,
    transparent 0 66%,#ffd4dc 66% 71%,#ffedbb 71% 76%,#e2f1d6 76% 81%,#d8ecfb 81% 86%,#e7cef5 86% 91%,transparent 91%);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.mac-laptop{margin:0 auto;width:min(780px,100%)}
.mac-laptop__lid{position:relative;width:88%;margin-inline:auto;padding:1.8% 1.8% 2.2%;border:1px solid color-mix(in srgb,var(--text) 70%,#fff);border-radius:20px 20px 4px 4px;background:var(--text);box-shadow:0 1px 0 color-mix(in srgb,var(--text) 40%,#fff) inset}
.mac-laptop__lid::before{content:"";position:absolute;top:0;left:50%;width:13%;height:2.6%;min-height:6px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:var(--text);z-index:1}
.mac-laptop__screen{aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:var(--bg)}
.mac-laptop__screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.mac-laptop__base{position:relative;height:clamp(9px,1.9vw,15px);border-radius:0 0 18px 18px/0 0 14px 14px;background:linear-gradient(color-mix(in srgb,var(--text) 14%,#fff),color-mix(in srgb,var(--text) 38%,#fff));box-shadow:0 22px 28px -16px color-mix(in srgb,var(--text) 55%,transparent)}
.mac-laptop__base::before{content:"";position:absolute;top:0;left:50%;width:15%;height:55%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:color-mix(in srgb,var(--text) 30%,#fff)}

/* ダウンロードボタン（光る要素の1つ目） */
.mac-cta{margin:36px 0 0}
.mac-hero .mac-download{gap:14px;min-height:68px;padding:16px 48px;border-radius:var(--r-pill);font-size:clamp(18px,2.2vw,24px);font-weight:800;letter-spacing:.01em;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent));
  box-shadow:0 12px 26px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.mac-hero .mac-download:hover{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 80%,#000))}
.mac-download svg{width:1.3em;height:1.3em;flex:none}
.mac-note{margin:14px 0 0;color:var(--text-2)}
.mac-lead{max-width:640px;margin:18px auto 0}

/* 入れ方の3枚のカード */
.mac-install{border-top:0;padding-block:36px 24px}
.mac-install .section-head{text-align:center}
.mac-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:44px}
.mac-steps li{--pad:20px;position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;padding:var(--pad);border:1px solid var(--separator);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card);counter-increment:none}
.mac-steps li::before{content:none}
.mac-steps li+li::before{content:"›";position:absolute;top:50%;left:-22px;transform:translate(-50%,-50%);font-size:34px;line-height:1;font-weight:700;color:var(--text-3);color:var(--control-border);
  width:auto;height:auto}
.mac-step__icon{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.mac-step__icon svg{width:30px;height:30px}
.mac-step__body{display:contents}
.mac-steps h3{grid-column:1/-1;margin:0;word-break:auto-phrase;font-size:clamp(17px,1.5vw,20px);line-height:1.5}
.mac-step__n{position:absolute;top:var(--pad);left:calc(var(--pad) + 70px);height:56px;display:flex;align-items:center;font-size:44px;line-height:1;color:var(--accent);font-weight:800}
.mac-steps p{grid-column:1/-1;margin:0;font-size:15px;line-height:1.75;color:var(--text-2)}

/* 公証の帯と公式キャラクター（右下に小さく1体） */
.mac-finish{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;margin-top:28px}
.mac-badge{grid-column:2;display:inline-flex;align-items:center;gap:10px;margin:0 0 6px;padding:8px 20px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--text);font-size:15px;font-weight:700;line-height:1.5}
.mac-badge svg{flex:none;width:24px;height:24px;padding:4px;border-radius:50%;background:var(--accent);color:var(--qz-on-accent)}
.mac-mascot-link{grid-column:3;justify-self:end;display:block;line-height:0}
.mac-mascot{display:block;width:132px;height:132px;object-fit:contain;
  /* 元画像は地が完全な白ではないので、四辺をぼかしてページの地になじませる */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}

@media(max-width:1000px){
  .mac-steps{gap:32px}
  .mac-steps li{--pad:18px}
  .mac-steps li+li::before{left:-16px}
}
@media(max-width:760px){
  .mac-hero{padding-top:20px}
  .mac-stage{margin-top:28px}
  .mac-laptop__lid{border-radius:12px 12px 3px 3px}
  .mac-laptop__screen{border-radius:3px}
  .mac-cta{margin-top:28px}
  .mac-hero .mac-download{width:100%;padding-inline:20px}
  .mac-steps{grid-template-columns:1fr;gap:34px}
  .mac-steps li+li::before{top:-17px;left:50%;transform:translate(-50%,-50%) rotate(90deg)}
  .mac-finish{grid-template-columns:1fr;justify-items:center;gap:6px}
  .mac-badge,.mac-mascot-link{grid-column:1}
  .mac-badge{font-size:14px;padding-inline:16px}
  .mac-mascot-link{justify-self:end}
  .mac-mascot{width:88px;height:88px}
}