@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap");

:root { --ink: #16251e; --forest: #164c37; --moss: #45765e; --paper: #f5f2e9; --milk: #fffdf8; --line: #c5cebc; --accent: #d46d34; --wash: #e3eadc; --serif: "Playfair Display", Georgia, serif; --sans: "DM Sans", sans-serif; --mono: "DM Mono", monospace; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
body::before { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(rgba(22, 76, 55, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 76, 55, .035) 1px, transparent 1px); background-size: 28px 28px; content: ""; pointer-events: none; }
.site-header { display: flex; align-items: baseline; justify-content: space-between; width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 25px 0; border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); font: 700 1.38rem/1 var(--sans); letter-spacing: -.08em; text-decoration: none; } .brand span { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.06em; } .brand sup { color: var(--accent); font: 500 .55rem var(--mono); }
.site-header p { margin: 0; color: var(--moss); font: .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
main { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 70px 0 84px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(230px, .7fr); align-items: center; gap: clamp(32px, 8vw, 120px); min-height: 360px; }
.eyebrow { margin: 0 0 13px; color: var(--forest); font: 500 .7rem/1.2 var(--mono); letter-spacing: .12em; }
h1, h2 { font-family: var(--serif); } h1 { max-width: 760px; margin: 0; font-size: clamp(3.1rem, 7vw, 6.2rem); font-weight: 600; letter-spacing: -.07em; line-height: .91; } h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.55rem); letter-spacing: -.045em; line-height: 1; }
.intro { max-width: 610px; margin: 25px 0 0; color: #405246; font-size: 1.12rem; line-height: 1.6; } .hero-note { margin: 22px 0 0; color: var(--moss); font: .74rem var(--mono); } .norm-list { margin: 14px 0 0; color: var(--forest); font: .68rem/1.7 var(--mono); letter-spacing: .03em; } .norm-list span { color: var(--moss); }
.norm-wheel { position: relative; display: grid; place-items: center; width: min(270px, 100%); aspect-ratio: 1; justify-self: center; border: 1px solid var(--forest); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fdfdf3 0 15%, var(--wash) 16% 100%); color: var(--forest); text-align: center; transform: rotate(8deg); } .norm-wheel::before { position: absolute; inset: 12px; border: 1px dashed var(--moss); border-radius: inherit; content: ""; } .norm-wheel strong { z-index: 1; font: 700 clamp(2rem, 4vw, 3.2rem) var(--serif); letter-spacing: -.08em; } .wheel-top, .wheel-bottom { position: absolute; z-index: 1; font: .6rem var(--mono); letter-spacing: .08em; } .wheel-top { top: 60px; } .wheel-bottom { bottom: 58px; font-size: .49rem; }
.upload-card, .scope, .result { position: relative; margin-top: 68px; border-top: 1px solid var(--forest); background: var(--milk); box-shadow: 10px 10px 0 rgba(69, 118, 94, .15); }
.upload-card { display: grid; grid-template-columns: 78px 1fr; gap: 0 24px; padding: 34px; } .section-number { color: var(--accent); font: .74rem var(--mono); letter-spacing: .06em; } .upload-heading { margin-bottom: 24px; } .upload-card form, .notice { grid-column: 2; }
.dropzone { display: grid; gap: 8px; padding: 28px; border: 1px dashed var(--forest); cursor: pointer; background: #fbfcf6; transition: background .18s ease, transform .18s ease; } .dropzone:hover { background: var(--wash); transform: translate(-3px, -3px); } .dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; } .dropzone strong { font-size: 1.08rem; } .dropzone span, .notice, .option { color: #405147; font: .86rem/1.45 var(--sans); } .option { display: flex; gap: 10px; align-items: start; margin: 17px 0; } .option input { accent-color: var(--forest); margin-top: 3px; } .option.consent { align-items: center; flex-wrap: wrap; } .consent a { color: var(--forest); font-weight: 700; } .review-options { margin: 17px 0; border: 1px solid var(--line); background: #fbfcf6; } .review-options summary { padding: 14px 16px; color: var(--forest); font: 500 .76rem var(--mono); cursor: pointer; } .option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 16px 4px; } .option-grid label { display: grid; gap: 6px; color: #405147; font: .78rem var(--mono); } .option-grid select { width: 100%; border: 1px solid var(--line); border-radius: 0; padding: 10px; color: var(--ink); background: var(--milk); font: .86rem var(--sans); } .review-options .option { margin: 15px 16px 8px; } .option-hint { margin: 0; padding: 0 16px 16px; color: #59665d; font: .8rem/1.45 var(--sans); }
button, .button-link { display: inline-block; border: 0; padding: 15px 22px; color: var(--milk); background: var(--forest); font: 500 .81rem var(--mono); letter-spacing: .035em; text-decoration: none; cursor: pointer; transition: transform .18s ease, background .18s ease; } button:hover, .button-link:hover { background: var(--ink); transform: translate(3px, 3px); } button:focus-visible, .dropzone:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; } button:disabled { opacity: .65; cursor: wait; } .notice { margin: 18px 0 0; }
.result { padding: 30px 34px 34px 136px; } .result h2 { font-size: 1.7rem; } .result.success { border-color: var(--forest); } .result.error { border-color: #a84236; } .text-link { margin-left: 18px; color: var(--forest); font: .8rem var(--mono); }
.scope { display: grid; grid-template-columns: 78px minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; padding: 34px; } .scope ol { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: flow; } .scope li { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; } .scope li::before { counter-increment: flow; color: var(--accent); font: .76rem var(--mono); content: "0" counter(flow); } .scope strong, .scope span { grid-column: 2; } .scope strong { margin-bottom: 3px; } .scope span { color: #56635a; font-size: .91rem; line-height: 1.45; }
.privacy-page { max-width: 900px; padding-top: 84px; } .privacy-page h1 { max-width: 830px; font-size: clamp(2.7rem, 6vw, 5.3rem); } .privacy-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 48px; background: var(--line); border: 1px solid var(--line); } .privacy-copy section { min-height: 206px; padding: 27px; background: var(--milk); } .privacy-copy h2 { font-size: 1.55rem; } .privacy-copy p { color: #485a4f; font-size: .95rem; line-height: 1.55; }
footer { display: flex; justify-content: space-between; gap: 24px; width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0 38px; border-top: 1px solid var(--line); color: var(--moss); font: .63rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }
@media (max-width: 700px) { .site-header, main, footer { width: min(100% - 28px, 1120px); } main { padding: 45px 0 58px; } .hero { grid-template-columns: 1fr; } .norm-wheel { width: 205px; justify-self: end; margin-top: -12px; } .wheel-top { top: 46px; } .wheel-bottom { bottom: 45px; } .upload-card { grid-template-columns: 1fr; padding: 24px; } .upload-card form, .notice { grid-column: 1; } .section-number { margin-bottom: 26px; } .result { padding: 25px; } .scope { grid-template-columns: 1fr; padding: 24px; } .scope .section-number { margin: 0; } .privacy-copy { grid-template-columns: 1fr; margin-top: 32px; } .option-grid { grid-template-columns: 1fr; } footer { align-items: start; flex-direction: column; } }