/* subpage.css — shared styles for /features/* and /about /faq /pricing
   Paired with styles.css (tokens). Path-agnostic. */

/* sub nav */
.snav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); }
.snav__in { max-width: 980px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 18px; }
.snav__back { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 14.5px; font-weight: 500; color: var(--soft); text-decoration: none; }
.snav__back:hover { color: var(--accent-ink); }
.snav .brand { font-size: 18px; }
.snav__sp { flex: 1; }
@media (max-width: 600px) { .snav__back span.txt { display: none; } }

.sub { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.sub--narrow { max-width: 760px; }

/* feature hero */
.fhero { padding-top: 60px; padding-bottom: 48px; }
.fhero__icon { width: 64px; height: 64px; border-radius: 18px; background: var(--accent-wash); border: 1px solid var(--accent-soft); display: grid; place-items: center; font-size: 32px; margin-bottom: 22px; }
.fhero__eye { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.fhero h1 { font-family: var(--font-head); font-size: clamp(32px, 5vw, 52px); letter-spacing: -.028em; line-height: 1.06; margin: 0 0 18px; max-width: 18ch; text-wrap: balance; }
.fhero__lede { font-size: clamp(17px, 2vw, 21px); color: var(--soft); max-width: 56ch; line-height: 1.5; text-wrap: pretty; }
.fhero__row { display: flex; align-items: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
.price-pill { font-family: var(--font-ui); font-weight: 700; font-size: 17px; color: var(--accent-ink); background: var(--accent-wash); border: 1px solid var(--accent-soft); padding: 10px 18px; border-radius: 999px; }
.price-pill small { font-weight: 500; color: var(--soft); font-size: 13px; }

.ssec { padding-top: 50px; padding-bottom: 50px; border-top: 1px solid var(--line); }
.ssec__eye { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; display: inline-flex; gap: 8px; align-items: center; }
.ssec__eye::before { content:""; width:18px; height:1.5px; background: var(--accent); }
.ssec h2 { font-family: var(--font-head); font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.02em; margin: 0 0 16px; max-width: 20ch; }
.ssec__lede { font-size: 18px; color: var(--soft); max-width: 60ch; margin: 0 0 30px; text-wrap: pretty; }
.ssec p { font-size: 17px; line-height: 1.6; color: var(--soft); max-width: 64ch; }
.ssec p b, .ssec p strong { color: var(--ink); }

/* category gallery (ai-designer) */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gal--3 { grid-template-columns: repeat(3, 1fr); }
.galc { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); transition: transform .2s, box-shadow .2s; }
.galc:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.galc__img { aspect-ratio: 3/4; position: relative; background: var(--bg-2); }
.galc__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.galc__img.ph { background: repeating-linear-gradient(45deg, var(--bg-2) 0 10px, var(--bg) 10px 20px); display: grid; place-items: center; }
.galc__img .ph-t { font-family: var(--font-ui); font-size: 12px; color: var(--softer); background: color-mix(in srgb, var(--card) 82%, transparent); padding: 4px 9px; border-radius: 7px; }
.galc__b { padding: 14px 15px; }
.galc__b h3 { font-family: var(--font-ui); font-weight: 600; font-size: 15px; margin: 0 0 4px; display: flex; gap: 7px; align-items: center; color: var(--ink); }
.galc__b p { font-family: var(--font-ui); font-size: 13px; color: var(--soft); margin: 0; line-height: 1.4; }
@media (max-width: 820px) { .gal, .gal--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .gal, .gal--3 { grid-template-columns: 1fr; } }

/* steps (feature flow) */
.fsteps { display: grid; gap: 14px; }
.fstep { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.fstep__n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-wash); border: 1.5px solid var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-ui); font-weight: 700; font-size: 15px; }
.fstep__b h3 { font-family: var(--font-head); font-size: 18px; margin: 0 0 5px; }
.fstep__b p { margin: 0; font-size: 15.5px; color: var(--soft); max-width: none; }

/* command chips (ai-admin) */
.cmds { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.cmd { font-family: var(--font-ui); font-size: 15px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; display: flex; gap: 10px; align-items: center; }
.cmd::before { content: "“"; font-size: 26px; color: var(--accent-soft); line-height: 0; }
.cmd .reply { margin-left: auto; font-size: 13px; color: var(--ok); font-weight: 600; font-family: var(--font-ui); display: inline-flex; align-items: center; gap: 5px; }

/* two-col list */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 640px) { .twocol { grid-template-columns: 1fr; gap: 22px; } }
.ilist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ilist li { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--ink); }
.ilist .yes { flex: none; margin-top: 1px; width: 21px; height: 21px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; }
.ilist .no { flex: none; margin-top: 1px; width: 21px; height: 21px; border-radius: 50%; background: #f6e2dd; color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; }
.col-h { font-family: var(--font-ui); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--softer); font-weight: 600; margin: 0 0 14px; }

/* callout */
.callout { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; font-size: 16.5px; color: var(--ink); line-height: 1.55; }
.callout b { color: var(--accent-ink); }
.callout--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 22%, white); }

/* durability series */
.series { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.series figure { margin: 0; }
.series__img { aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); position: relative; background: var(--bg-2); }
.series__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; }
.series__tag { position: absolute; top: 10px; left: 10px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: #fff; background: rgba(28,22,18,.62); backdrop-filter: blur(4px); padding: 4px 10px; border-radius: 999px; }
.series figcaption { font-family: var(--font-ui); font-size: 13px; color: var(--soft); margin-top: 10px; text-align: center; }

/* faq (subpage) */
.sfaq { max-width: 760px; }
.sfaq__cat { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 34px 0 8px; }
.sfaq__item { border-bottom: 1px solid var(--line); }
.sfaq__q { width: 100%; background: none; border: none; cursor: pointer; text-align: left; padding: 20px 0; display: flex; gap: 16px; align-items: flex-start; font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); }
.sfaq__q:hover { color: var(--accent-ink); }
.sfaq__ico { margin-left: auto; flex: none; color: var(--accent); transition: transform .25s; font-size: 22px; line-height: 1; }
.sfaq__item.open .sfaq__ico { transform: rotate(45deg); }
.sfaq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.sfaq__a-in { padding: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--soft); max-width: 66ch; }
.sfaq__a-in b { color: var(--ink); }

/* pricing */
.pcalc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.pcalc__grid { display: grid; gap: 10px; }
.pmod { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.pmod.on { border-color: var(--accent); background: var(--accent-wash); }
.pmod__check { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--softer); display: grid; place-items: center; color: #fff; transition: .15s; }
.pmod.on .pmod__check { background: var(--accent); border-color: var(--accent); }
.pmod__n { flex: 1; font-family: var(--font-ui); font-size: 15.5px; color: var(--ink); }
.pmod__n .e { margin-right: 8px; }
.pmod__p { font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--accent-ink); }
.pmod__p.free { color: var(--ok); }
.ptotal { margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; }
.ptotal__l { font-family: var(--font-head); font-weight: 700; font-size: 20px; }
.ptotal__v { font-family: var(--font-head); font-weight: 700; font-size: 30px; color: var(--accent-ink); }
.ptotal__v small { font-size: 15px; color: var(--soft); font-weight: 500; }
.scen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scen__c { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.scen__c h4 { font-family: var(--font-head); font-size: 18px; margin: 0 0 6px; }
.scen__sum { font-family: var(--font-head); font-weight: 700; font-size: 26px; color: var(--accent-ink); margin: 0 0 12px; }
.scen__c ul { list-style: none; padding: 0; margin: 0; }
.scen__c li { font-family: var(--font-ui); font-size: 13.5px; color: var(--soft); padding: 4px 0; display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 720px) { .scen { grid-template-columns: 1fr; } }

/* bottom CTA band */
.fband { background: var(--ink); color: #f5ece2; border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 64px) 32px; text-align: center; position: relative; overflow: hidden; margin: 60px 0; }
.fband::before { content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 50% -20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%); }
.fband h2 { font-family: var(--font-head); font-size: clamp(26px, 4vw, 40px); color: #fff; margin: 0 auto 10px; max-width: 18ch; position: relative; }
.fband p { color: #d6c8ba; font-size: 17px; margin: 0 auto 26px; max-width: 46ch; position: relative; }
.fband .btn { position: relative; }

/* sub footer */
.sfoot { border-top: 1px solid var(--line); padding: 40px 0 56px; }
.sfoot__in { max-width: 980px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.sfoot__links { display: flex; gap: 22px; flex-wrap: wrap; }
.sfoot__links a { font-family: var(--font-ui); font-size: 14px; color: var(--soft); text-decoration: none; }
.sfoot__links a:hover { color: var(--accent-ink); }
.sfoot__c { font-family: var(--font-ui); font-size: 13px; color: var(--softer); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }