/* Homepage: layered tool cards, clear limits, and a quiet page around them. */
.hero { display: grid; grid-template-columns: .91fr 1.09fr; align-items: center; min-height: 590px; padding: 45px 0 40px; gap: 36px; }
.hero-copy { position: relative; z-index: 3; }
.hero h1 { font-size: clamp(36px, 3.7vw, 48px); font-weight: 600; letter-spacing: -.055em; line-height: 1.45; margin: 20px 0 23px; }
.hero-description { color: #637267; font-size: 15px; line-height: 1.95; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 28px; }
.hero-actions .button { min-height: 44px; font-size: 14px; padding: 11px 25px; border-radius: 5px; }
.primary { color: #fffaf3; background: var(--red); }
.primary:hover { background: var(--red-hover); transform: translateY(-2px); }
.secondary-link { display: inline-flex; align-items: center; padding: 10px 0; font-size: 14px; color: var(--blue); text-decoration: underline; text-underline-offset: 5px; }

.tool-deck { position: relative; isolation: isolate; height: 460px; min-width: 0; }
.feature-card { position: absolute; display: flex; flex-direction: column; border-radius: 12px; padding: 18px; gap: 14px; box-shadow: 0 5px 8px #2e403c04, 0 18px 28px #2e403c10; transition: transform .25s, box-shadow .25s; transform-origin: 50% 65%; }
.image-card { width: 62%; left: 0; top: 76px; background: var(--surface); border: 1px solid #cbd5c7; transform: rotate(-5deg); z-index: 2; }
.file-card { width: 60%; right: 0; top: 22px; background: var(--file); border: 1px solid #c7d5c2; transform: rotate(5deg); box-shadow: 0 14px 24px #2e403c0b; z-index: 1; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; color: #70836d; line-height: 1.7; }
.card-top .icon { width: 17px; height: 17px; color: var(--file-ink); }
.image-card .card-top .icon { color: var(--blue); }
.image-art { height: 162px; position: relative; overflow: hidden; border-radius: 6px; background: #edf1ea; }
.image-art > svg { width: 100%; height: 100%; display: block; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.image-art > span { position: absolute; bottom: 9px; left: 11px; color: #f4f7ec; font-size: 9px; letter-spacing: .06em; }
.card-copy h2 { font-size: 25px; font-weight: 600; letter-spacing: -.03em; }
.card-copy p { font-size: 12px; color: #61735f; line-height: 1.7; margin-top: 7px; }
.file-card .card-copy { text-align: right; }
.file-card .card-copy p { max-width: 160px; margin-left: auto; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #ced8c6; font-size: 11px; color: #5b6b59; padding-top: 12px; margin-top: 3px; line-height: 1.8; }
.card-bottom strong { font-weight: 600; color: #344d42; }
.file-card .card-bottom { justify-content: flex-end; color: #546d51; gap: 9px; }
.file-limits { display: grid; gap: 1px; max-width: 120px; text-align: right; }
.file-limits > span { white-space: nowrap; }
.entry-arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #edf1e6; font-size: 21px; color: var(--blue); line-height: 1; flex-shrink: 0; transition: transform .3s; }
.file-card .entry-arrow { background: #eaf0e2; color: #59795e; }
.file-art { height: 162px; position: relative; }
.file-paper { position: absolute; width: 89px; height: 117px; left: calc(61% - 44px); top: 15px; border: 1px solid #b8cbb0; border-radius: 5px; transition: transform .35s; }
.back-paper { background: #c9d8c1; border-color: #b9cbb0; transform: translate(-9px,-3px) rotate(-10deg); }
.front-paper { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 11px; background: #f6f9f0; box-shadow: 0 4px 8px #4257350c; transform: rotate(5deg); }
.front-paper > .icon { width: 30px; height: 30px; color: #59795e; stroke-width: 1.2; }
.front-paper > span { font-size: 9px; color: #59795e; font-family: ui-monospace, monospace; }
.front-paper > i { display: block; width: 40px; height: 2px; background: #dbe4d3; border-radius: 3px; }
.front-paper > i:last-child { width: 28px; margin-top: -4px; }
.file-link-icon { position: absolute; right: 8%; bottom: 11px; width: 31px; height: 31px; border: 1px solid #c3d2b9; border-radius: 50%; background: #f0f4e8; display: grid; place-items: center; box-shadow: 0 3px 5px #42573508; transition: transform .35s; }
.file-link-icon > .icon { color: #59795e; width: 15px; height: 15px; }
.feature-card:focus-visible { outline-color: var(--blue); outline-offset: 6px; }
.image-card:focus-visible { transform: translateY(-8px) rotate(-3deg); }
.file-card:focus-visible { transform: translateY(-8px) rotate(3deg); }

.other-tools { border-top: 1px solid #cfd8c9; border-bottom: 1px solid #dbe2d5; display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 20px; padding: 24px 0; margin-top: 5px; }
.other-tools h2 { font-size: 16px; font-weight: 600; color: var(--blue); }
.other-tools p { font-size: 13px; color: #637267; }
.other-tools a, .site-note > a { color: var(--blue); text-decoration: underline; text-underline-offset: 5px; }
.other-tools a { font-size: 13px; }
.other-tools a span[aria-hidden] { padding-left: 10px; }
.site-note { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 29px 0 43px; }
.site-note p { font-size: 13px; line-height: 1.9; color: #637267; }
.site-note > a { font-size: 12px; flex-shrink: 0; }

@media (hover: hover) and (pointer: fine) {
    .image-card:hover { transform: translateY(-8px) rotate(-3deg); box-shadow: 0 22px 32px #2e403c19; }
    .image-card:hover .image-art > svg { transform: scale(1.035); }
    .file-card:hover { transform: translateY(-8px) rotate(3deg); box-shadow: 0 22px 30px #2e403c12; }
    .file-card:hover .front-paper { transform: translateY(-4px) rotate(2deg); }
    .file-card:hover .back-paper { transform: translate(-11px,-5px) rotate(-13deg); }
    .file-card:hover .file-link-icon { transform: translate(2px,-3px); }
    .feature-card:hover .entry-arrow { transform: translate(2px,-2px); }
}
@media (max-width: 900px) {
    .hero { gap: 20px; }
    .hero h1 { font-size: 36px; }
    .hero-description { font-size: 14px; }
    .file-card .card-bottom { font-size: 10px; }
}
@media (max-width: 760px) {
    .hero { grid-template-columns: 1fr; min-height: 0; gap: 28px; padding: 36px 0 35px; }
    .tool-deck { width: min(530px,100%); margin-inline: auto; height: 470px; }
    .other-tools { grid-template-columns: 1fr auto; gap: 10px; }
    .other-tools p { grid-column: 1/-1; grid-row: 2; }
    .site-note { align-items: start; }
    .file-card .card-bottom { font-size: 11px; }
}
@media (max-width: 480px) {
    .hero h1 { font-size: 34px; }
    .tool-deck { height: 430px; }
    .feature-card { padding: 13px; gap: 12px; }
    .image-card { top: 69px; }
    .image-art, .file-art { height: 136px; }
    .card-copy h2 { font-size: 23px; }
    .card-copy p { font-size: 11px; }
    .card-top { font-size: 9px; }
    .card-bottom, .file-card .card-bottom { font-size: 10px; }
    .site-note { display: block; }
    .site-note > a { display: inline-block; margin-top: 15px; }
    .other-tools p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .image-card:hover, .image-card:focus-visible { transform: rotate(-5deg); }
    .file-card:hover, .file-card:focus-visible { transform: rotate(5deg); }
    .image-card:hover .image-art > svg { transform: none; }
    .file-card:hover .front-paper { transform: rotate(5deg); }
    .file-card:hover .back-paper { transform: translate(-9px,-3px) rotate(-10deg); }
    .feature-card:hover .entry-arrow, .file-card:hover .file-link-icon { transform: none; }
}