/* info.css (owner: builder C): FAQ, contact, shipping and returns, privacy, terms, accessibility, 404.
   One quiet template: a stone plate, a sticky table of contents on long pages, a calm reading column. Tokens only. */

/* ---------------------------------------------------------------- plate */
.info-plate { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.info-plate-media { position: absolute; inset: 0; z-index: -1; }
.info-plate-img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; opacity: .9; filter: var(--world-filter); }
/* Violet Hour: the fern shadows sway (round 6); the clip sits exactly over the still and shares its crop and grade */
.info-motion { position: absolute; inset: 0; pointer-events: none; }
.info-plate-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 80%, transparent), color-mix(in srgb, var(--bg) 30%, transparent) 60%, transparent), linear-gradient(0deg, var(--bg), transparent 45%); }
.info-plate-in { position: relative; padding-top: 26px; padding-bottom: clamp(44px, 5vw, 70px); }
.info-h1 { margin-top: clamp(60px, 7vw, 100px); font-size: clamp(52px, 5.6vw, 88px); letter-spacing: -.026em; }
.info-lede { margin-top: 20px; color: var(--text); opacity: .86; max-width: 52ch; }

/* ---------------------------------------------------------------- body grid + table of contents */
.info-grid { display: grid; grid-template-columns: minmax(0, 760px); justify-content: start; gap: clamp(40px, 6vw, 110px); padding-top: clamp(50px, 6vw, 80px); }
.info-grid.has-toc { grid-template-columns: minmax(220px, 270px) minmax(0, 760px); }
.info-side { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; scrollbar-width: thin; }
.toc-h { margin: 0 0 14px; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.toc a { position: relative; display: block; padding: 7px 0 7px 16px; font-size: 14.5px; line-height: 1.35; color: var(--text-2); text-decoration: none; transition: color .3s; }
.toc li.is-sub a { padding-left: 30px; font-size: 13.5px; }
.toc a:hover { color: var(--text); }
.toc a[aria-current] { color: var(--text); }
.toc a[aria-current]::before { content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* ---------------------------------------------------------------- the draft banner */
.draft { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 20px; align-items: baseline; margin-top: 30px; padding: 18px 22px; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.draft-k { margin: 0; font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.draft p:not(.draft-k) { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }

/* ---------------------------------------------------------------- policies */
.pol h2 { margin: 1.9em 0 .5em; font: 300 32px/1.15 var(--display); letter-spacing: -.008em; scroll-margin-top: 100px; }
.pol h3 { margin: 1.5em 0 .4em; font: 400 22px/1.25 var(--display); letter-spacing: 0; scroll-margin-top: 100px; }
.pol > :first-child, .pol-part:first-child > h2:first-child { margin-top: 0; }
.pol-part + .pol-part { margin-top: 3em; padding-top: .4em; border-top: 1px solid var(--line); }
.pol-sec + .pol-sec { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.pol-sec h2, .pol-sec h3 { padding-top: .2em; }
.pol-updated { font-size: 14.5px !important; color: var(--text-2); }
.pol-intro { font-size: 19px !important; line-height: 1.65 !important; color: var(--text); }
.pol-contact { margin-top: 2.4em !important; padding-top: 1.2em; border-top: 1px solid var(--line); }
.pol p, .pol li { color: color-mix(in srgb, var(--text) 90%, var(--text-2)); }
.pol a { color: var(--text); }
.sr-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 980px; margin: 34px 0 0; padding: 0; list-style: none; }
.sr-sum li { padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--radius); background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sr-i { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.sr-sum p { margin: 0; font-size: 16px; line-height: 1.5; }

/* ---------------------------------------------------------------- FAQ */
.faq-count { margin: 18px 0 0; font-size: 13px; color: var(--text-2); }
.faq-g { padding-bottom: 46px; scroll-margin-top: 100px; }
.faq-g + .faq-g { padding-top: 6px; }
.faq-gh { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.faq-gh h2 { margin: 0; font: 300 34px/1.1 var(--display); letter-spacing: -.01em; scroll-margin-top: 100px; }
.faq-all { font-size: 14px; }
.qa { border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font: 400 20px/1.35 var(--display); transition: color .3s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa summary i { position: relative; flex: none; width: 16px; height: 16px; }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .45s var(--settle); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::after { transform: rotate(0deg); }
.qa[open] summary { color: var(--text); }
.qa-a { padding: 0 44px 24px 0; font-size: 16.5px; line-height: 1.7; color: color-mix(in srgb, var(--text) 88%, var(--text-2)); }
.qa-a p { margin: 0 0 .8em; max-width: 64ch; }
.qa-a p:last-child { margin-bottom: 0; }
.qa[open] .qa-a { animation: qa-in .5s var(--settle); }
@keyframes qa-in { from { opacity: 0; transform: translateY(-4px); } }
.qa.is-target summary { color: var(--accent); }
.qa-link { margin-top: 14px !important; }
.help-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 30px; align-items: center; margin-top: 30px; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--bg-2); background-image: var(--atmos-band); }
.help-card h2 { grid-column: 1; }
.help-card p { grid-column: 1; margin: 0; color: var(--text-2); }
.help-card .btn { grid-column: 2; grid-row: 1 / span 2; }

/* ---------------------------------------------------------------- contact */
.info-contact .info-grid { grid-template-columns: minmax(0, 1fr); }
.ct { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.ct-block { padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.ct-block p { margin: 0 0 8px; }
.ct-k { font: 500 12px/1 var(--sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 12px !important; }
.ct-email { font: 300 clamp(22px, 2.1vw, 30px)/1.25 var(--display); overflow-wrap: anywhere; }
.ct-email a { text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.ct-email a:hover { color: var(--accent); }
.ct-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ct-two > .ct-span { grid-column: 1 / -1; }
.ct-fine { font-size: 14px; color: var(--text-2); }
.ct-notes { margin: 0; padding: 0; list-style: none; }
.ct-notes li { position: relative; padding: 6px 0 6px 22px; font-size: 15px; color: var(--text-2); }
.ct-notes li::before { content: ''; position: absolute; left: 0; top: 1em; width: 12px; height: 1px; background: var(--accent); }
.ct-form-wrap { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.ct-form-wrap .ct-fine { margin: 10px 0 22px; }
.cf { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-f { display: grid; gap: 8px; }
.cf-wide { grid-column: 1 / -1; }
.cf label { font-size: 14px; color: var(--text-2); }
.cf select.field { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.cf-area { height: auto; min-height: 160px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.cf-go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }
.cf-msg { margin: 0; }
.ct-more { display: flex; flex-wrap: wrap; gap: 18px 36px; margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- 404 */
.nf-plate { position: relative; isolation: isolate; min-height: calc(100vh - 114px); display: grid; align-items: center; overflow: hidden; }
.nf-media { position: absolute; inset: 0; z-index: -1; }
.nf-img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.nf-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bg-deep) 75%, transparent), transparent 55%), linear-gradient(0deg, var(--bg), transparent 30%); }
.nf-in { padding-top: 60px; padding-bottom: 80px; }
.nf-code { margin: 0 0 18px; font-size: 14px; letter-spacing: .3em; color: var(--accent); }
.nf-in .h1 { max-width: 12ch; }
.nf-in .lede { margin-top: 22px; color: var(--text); opacity: .86; }
.nf-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.nf-links { margin: 30px 0 0; font-size: 15px; color: var(--text-2); }
.pg-404 .foot { margin-top: 0; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 960px) {
  .info-grid.has-toc { grid-template-columns: minmax(0, 1fr); }
  .info-side { position: relative; top: 0; max-height: none; }
  .toc ol { columns: 2 180px; column-gap: 20px; border-left: 0; }
  .toc a { padding-left: 0; }
  .toc li.is-sub { display: none; }
  .toc a[aria-current]::before { display: none; }
  .ct { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sr-sum { grid-template-columns: 1fr; }
  .draft { grid-template-columns: 1fr; }
  .cf { grid-template-columns: 1fr; }
  .ct-form-wrap { padding: 20px; }
  .ct-two { grid-template-columns: 1fr; }
  .help-card { grid-template-columns: 1fr; }
  .help-card .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .qa summary { font-size: 18px; }
  .qa-a { padding-right: 0; }
  .faq-gh h2 { font-size: 28px; }
  .pol h2 { font-size: 27px; }
}