/* Shared by the legal pages. Inlined into each file at build time is not
   worth it for three documents — one small stylesheet keeps them identical. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url("../assets/fonts/inter-latin-800-normal.woff2") format("woff2")}

:root{
	--g1:#0fae7d; --g2:#075e4a;
	--navy:#122320; --body:#51625c; --faint:#8a9a94;
	--line:#e3ebe8; --bg:#f7faf9; --coral:#ff6d4d;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
	margin:0;background:#fff;color:var(--body);
	font-family:Inter,"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Roboto,sans-serif;
	font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:780px;margin:0 auto;padding:0 24px}

header.top{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:5}
header.top .wrap{display:flex;align-items:center;gap:20px;height:64px;max-width:1080px}
/* Identical to the landing page's mark, bars included. Without the ::after
   these pages showed a blank green tile while the LP, the favicon and the
   store icon all show the descending reach bars. */
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px;color:var(--navy);text-decoration:none;letter-spacing:-.02em}
.logo .mark{
	width:26px;height:26px;border-radius:7px;position:relative;flex:none;
	background:linear-gradient(135deg,var(--g1),var(--g2));
	box-shadow:0 4px 12px rgba(12,157,116,.35);
}
.logo .mark::after{
	content:"";position:absolute;left:6px;right:6px;bottom:6px;height:3px;border-radius:2px;background:#fff;
	box-shadow:0 -5px 0 0 rgba(255,255,255,.75),0 -10px 0 0 rgba(255,255,255,.5);
}
header.top nav{margin-left:auto;display:flex;gap:18px;font-size:14px}
header.top nav a{color:var(--body);text-decoration:none}
header.top nav a:hover,header.top nav a[aria-current]{color:var(--g2);font-weight:600}

main{padding:56px 0 72px}
h1{font-size:40px;line-height:1.15;letter-spacing:-.03em;color:var(--navy);margin:0 0 10px;font-weight:800}
.dates{font-size:14px;color:var(--faint);margin:0 0 8px}
.intro{background:var(--bg);border-left:3px solid var(--g1);padding:16px 20px;border-radius:0 10px 10px 0;margin:28px 0 8px;font-size:15px}
h2{font-size:22px;line-height:1.3;letter-spacing:-.02em;color:var(--navy);margin:44px 0 12px;font-weight:700}
h3{font-size:17px;color:var(--navy);margin:28px 0 8px;font-weight:600}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin:0 0 7px}
strong{color:var(--navy);font-weight:600}
a{color:var(--g2)}
hr{border:0;border-top:1px solid var(--line);margin:38px 0}
table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
th{color:var(--navy);font-weight:600;background:var(--bg)}
.caps{font-size:14px;letter-spacing:.01em}
.note{font-size:14px;color:var(--faint)}
/* Section 15 of the Terms promises that material changes are announced at
   the top of the page. This is that announcement, and it has to look
   different from .intro or it reads as part of the document. */
.changed{background:#fff8e6;border-left:3px solid #d9a300;padding:14px 18px;border-radius:0 10px 10px 0;margin:18px 0 0;font-size:14.5px}

footer.site{border-top:1px solid var(--line);padding:30px 0 46px;font-size:13.5px;color:var(--faint)}
footer.site .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;max-width:1080px}
footer.site a{color:var(--faint)}

@media (max-width:640px){
	h1{font-size:30px}
	h2{font-size:19px}
	h3{font-size:16px}
	main{padding:36px 0 52px}
	.wrap{padding:0 18px}
	/* Touch targets: 16px-tall text links in a nav or footer are not tappable. */
	header.top nav{gap:6px;font-size:13px;margin-left:auto}
	header.top nav a{display:inline-block;padding:12px 6px}
	header.top .wrap{gap:8px}
	footer.site .wrap{gap:6px}
	footer.site a{display:inline-block;padding:10px 0}
	/* Long tables (sub-processors, legal bases) scroll rather than squeeze. */
	table{display:block;overflow-x:auto;white-space:nowrap}
	td,th{white-space:normal;min-width:110px}
	li{margin-bottom:9px}
}