/* PC / tablet integration, with the shared custom-field catalog adapted for mobile below. */
.pc-only { display: none; }
@media (min-width: 768px) {
 html:has(> body.hero-feature-page) { background: #0F1B3D; color-scheme: dark; }
 body.hero-feature-page {
  --bg:#0F1B3D; --ink:#F5F1E8; --sub:#BCC5E2; --mute:#A7B3D3;
  --body2:#D9DEEE; --blue:#A8B5FF; --line:#3B4B70; --line2:#2D3C5E;
  --soft:#223455; --sel:#293B63;
  background:var(--bg); color:var(--ink);
 }
 .hero-feature-page .site-hdr { background:#0F1B3D; border-color:var(--line2); }
 .hero-feature-page .site-bar { max-width:1248px; padding:14px 48px; }
 .hero-feature-page .site-bar > .brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:20px; }
 .hero-feature-page .site-hdr summary { color:var(--ink); background:transparent; border-color:var(--line); }
 .hero-feature-page .site-hdr details nav { background:#172646; border-color:var(--line); box-shadow:0 16px 40px #0005; }
 .hero-feature-page .site-hdr details nav a { color:var(--ink); }
 .hero-feature-page .site-hdr details nav a:hover,
 .hero-feature-page .site-hdr a[aria-current] { background:var(--sel); color:var(--blue); }
 .hero-feature-page .hero--feature { background:#0F1B3D; color:var(--ink); position:relative; isolation:isolate; overflow:hidden; }
 .hero--feature::before { content:""; position:absolute; z-index:-1; width:900px; aspect-ratio:1; border-radius:50%; right:-150px; top:-100px; background:#3C4CC2; opacity:.2; pointer-events:none; }
 .hero-feature-page .completed .hero-in { min-height:0; }
 .completed .hero--feature .hero-in {
  max-width:1248px; margin:auto; padding:56px 48px 64px; min-height:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-areas:"eyebrow visual" "title visual" "lede visual" "meaning visual" "cta visual" "points visual";
  grid-template-rows:repeat(6,auto); gap:0 56px; align-content:center;
 }
 .hero--feature .hero-eyebrow { grid-area:eyebrow; color:var(--sub); font-size:14px; }
 .completed .hero--feature .hero-h1 { grid-area:title; margin-top:16px; font-size:clamp(60px,7.2vw,96px); line-height:1.12; color:var(--ink); letter-spacing:-.035em; }
 html:not([lang="ja"]) .completed .hero--feature .hero-h1 { font-size:clamp(52px,6.4vw,82px); }
 .hero--feature .hero-title-line { display:block; }
 .completed .hero--feature .hero-lede { grid-area:lede; margin-top:22px; color:var(--ink); font-size:24px; line-height:1.5; }
 .hero--feature .hero-lede br { display:none; }
 .hero--feature .freedom-meaning { grid-area:meaning; margin-top:14px; max-width:420px; color:var(--sub); font-size:13px; }
 .completed .hero--feature .hero-cta { grid-area:cta; margin-top:26px; width:fit-content; max-width:100%; }
 .hero--feature .hero-cta .cta { min-width:260px; width:auto; padding:0 30px; }
 .hero--feature .cta-note { color:var(--sub); }
 .completed .hero--feature .hero-vis { grid-area:visual; grid-row:1 / 7; align-self:center; width:100%; margin:0; }
 .hero--feature .hero-feature-visual { max-width:540px; width:100%; }
 .hero--feature .hero-feature-visual figcaption { margin-top:18px; color:var(--sub); font-size:12px; }
 .hero-feature-stage .store-crop { box-shadow:0 20px 40px #0005; }
 .completed .hero--feature .hero-pts { grid-area:points; margin-top:26px; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; color:var(--ink); font-size:12px; }
 .hero--feature .hero-pts li { border:1px solid #677294; padding:6px 10px; border-radius:999px; }
 .hero-feature-page .cta--fill { background:#F5F1E8; color:#0F1B3D; }
 .hero-feature-page .skip { background:#F5F1E8; color:#0F1B3D; }
 .hero-feature-page #fast, .hero-feature-page #setup, .hero-feature-page #own-data, .hero-feature-page #faq { background:#0F1B3D; }
 .hero-feature-page #freedom-to, .hero-feature-page #analysis { background:#122142; }
 .hero-feature-page #history { background:#142448; }
 .hero-feature-page #creed { background:#101D3D; }
 .hero-feature-page #pricing { background:#132344; }
 .hero-feature-page .sec { padding:64px 48px; border-top:1px solid var(--line2); }
 .hero-feature-page .story-in, .hero-feature-page .creed-in, .hero-feature-page .pr-in, .hero-feature-page .faq-in { max-width:1152px; margin:auto; min-width:0; }
 .hero-feature-page .story .pillar, .hero-feature-page .pillar { color:var(--blue); font-size:40px; line-height:1.15; }
 .hero-feature-page #setup .pillar, .hero-feature-page #history .pillar, .hero-feature-page #own-data .pillar { font-size:22px; line-height:1.4; }
 .hero-feature-page .story .h2, .hero-feature-page .h2 { margin-top:12px; font-size:38px; line-height:1.4; }
 .hero-feature-page .story-body { font-size:16px; line-height:1.85; margin-top:20px; color:var(--body2); }
 .hero-feature-page .near-note { font-size:13px; line-height:1.8; color:var(--sub); }
 .hero-feature-page .story-heading, .hero-feature-page .start-card, .hero-feature-page .exercise-example { min-width:0; }
 .hero-feature-page .start-card, .hero-feature-page .exercise-example,
 .hero-feature-page .three-steps li, .hero-feature-page .plan { background:#172646; border-color:var(--line); color:var(--ink); }
 .hero-feature-page .exercise-values, .hero-feature-page .plan-band { background:var(--sel); }
 .hero-feature-page .exercise-fields > div { background:var(--soft); }
 .hero-feature-page .exercise-fields dt { color:var(--sub); }
 .hero-feature-page .exercise-fields dd { color:var(--ink); }
 .hero-feature-page .field-plan { background:#3C4CC2; color:#fff; }
 .hero-feature-page .field-group:first-child .field-plan { background:var(--sel); color:var(--ink); }
 .hero-feature-page .field-group-title { font-size:20px; gap:10px 14px; margin-bottom:16px; }
 .hero-feature-page .field-plan { font-size:13px; }
 .hero-feature-page .exercise-example-heading h4 { font-size:19px; line-height:1.5; }
 .hero-feature-page .exercise-values { font-size:21px; padding:12px 14px; }
 .hero-feature-page .exercise-values small, .hero-feature-page .exercise-values-lr > span { font-size:14px; }
 .hero-feature-page .exercise-fields { margin-top:16px; gap:8px; }
 .hero-feature-page .exercise-fields dt { font-size:13px; }
 .hero-feature-page .exercise-fields dd { font-size:15px; }
 .hero-feature-page .store-visual { width:100%; }
 .hero-feature-page .fast-input-card { background:#172646; border-color:var(--line); padding:18px; }
 .hero-feature-page .fast-input-card figcaption { color:var(--ink); font-size:17px; }
 .hero-feature-page .fast-inputs { max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
 .hero-feature-page .field-groups { max-width:none; }
 .hero-feature-page .store-basic-grid { max-width:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
 .hero-feature-page .exercise-examples { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
 .hero-feature-page .exercise-example { padding:24px; }
 .hero-feature-page .appearance-customization { max-width:none; }
 .hero-feature-page .appearance-heading h3 { font-size:34px; }
 .hero-feature-page .appearance-free { font-size:14px; }
 .hero-feature-page .appearance-customization > p { color:var(--body2); font-size:17px; }
 .hero-feature-page .setup-method { background:#172646; border-color:var(--line); }
 .hero-feature-page .setup-method h3 { font-size:23px; }
 .hero-feature-page .setup-method > p { font-size:15px; color:var(--body2); }
 .hero-feature-page .setup-result-example .exercise-example { padding:16px; background:var(--soft); }
 .hero-feature-page .setup-result-example h4 { font-size:18px; }
 .hero-feature-page .setup-result-title { color:var(--ink); }
 .hero-feature-page .setup-result-example .exercise-values { font-size:20px; margin-top:14px; }
 .hero-feature-page .setup-result-example .exercise-fields { margin-top:14px; }
 .hero-feature-page .setup-or { color:var(--sub); }
 .hero-feature-page .field-aside h3 { font-size:22px; line-height:1.55; }
 .hero-feature-page .plan--pro { background:#21315A; border-color:#A8B5FF; }
 .hero-feature-page .plan-pills { color:var(--sub); }
 .hero-feature-page .band-v--2 { border-color:var(--line); }
 .hero-feature-page .creed-list li { border-color:var(--line); }
 .hero-feature-page .creed-list .n { color:var(--blue); }
 .hero-feature-page .creed-list .b { color:var(--body2); }
 .hero-feature-page .creed-list .creed-noads { background:#1B2B50; border-color:#6F83D1; }
 .hero-feature-page .creed-list .creed-noads .t { color:var(--ink); }
 .hero-feature-page .closing { background:#0B1530; color:var(--ink); border-top:1px solid var(--line2); }
 .hero-feature-page .closing .cl-h { color:var(--ink); }
 .hero-feature-page .closing .cl-eyebrow, .hero-feature-page .closing .cl-pts { color:var(--sub); }
 .hero-feature-page .site-footer { background:#0B1530; border-top:1px solid var(--line2); color:var(--sub); padding:36px 48px; }
 .hero-feature-page .site-footer a { color:var(--body2); }
 .hero-feature-page #screen-dialog { background:#101E3C; color:var(--ink); }
 .hero-feature-page #screen-dialog::backdrop { background:#050B1EE6; }
 .hero-feature-page .dialog-close { background:#172646; color:var(--ink); border-color:var(--line); }
}
@media (min-width:1024px) {
 .hero-feature-page .site-bar { min-height:76px; }
 .hero-feature-page .desktop-nav { display:flex; }
 .hero-feature-page .mobile-menu { display:none; }
 .hero-feature-page .language-menu { margin-left:10px; }
 .hero-feature-page .desktop-nav a { padding:12px 9px; font-size:14px; }
 .hero-feature-page .sec { padding-block:72px; }
 .hero-feature-page .story .h2, .hero-feature-page .h2 { font-size:40px; }
 html:not([lang="ja"]) .hero-feature-page .story .h2,
 html:not([lang="ja"]) .hero-feature-page .h2 { font-size:36px; }
 .hero-feature-page #fast .story-in { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:24px 48px; grid-template-areas:"head starts" "head note" "comfort inputs"; }
 #fast .story-heading { grid-area:head; }
 #fast .two-cards { grid-area:starts; margin:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
 #fast .two-cards .start-card { padding:24px 20px; gap:14px; }
 #fast .two-cards h3 { font-size:19px; }
 #fast .two-cards .step-action { font-size:25px; }
 #fast .two-cards p { font-size:15px; }
 #fast .near-note { grid-area:note; margin:0; max-width:none; }
 #fast .fast-comfort { grid-area:comfort; margin:24px 0 0; align-self:center; max-width:330px; font-size:27px; line-height:1.5; }
 #fast .fast-inputs { grid-area:inputs; margin:12px 0 0; align-items:start; }
 .hero-feature-page #freedom-to .story-in { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:28px 48px; }
 #freedom-to .story-heading { grid-column:1; grid-row:1; align-self:center; }
 .hero-feature-page #freedom-to .field-groups { display:contents; }
 #freedom-to .field-group:first-child { grid-column:2; grid-row:1; align-self:center; }
 #freedom-to .field-group:last-child { grid-column:1 / -1; margin-top:12px; }
 #freedom-to .exercise-example { display:flex; flex-direction:column; }
 #freedom-to .exercise-example .exercise-values { margin-top:18px; }
 #freedom-to .machine-location { margin-top:6px; margin-bottom:0; }
 #freedom-to .exercise-fields { margin-bottom:0; }
 #freedom-to .field-policy { grid-column:1 / -1; margin:0; font-size:13px; }
 .hero-feature-page .appearance-customization {
  grid-column:1 / -1; margin:16px 0 0; padding:40px 36px; border:1px solid var(--line); border-radius:24px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"head visual" "copy visual";
  gap:16px 64px; align-content:center; align-items:center; background:#172646;
 }
 .appearance-heading { grid-area:head; align-self:end; justify-content:flex-start; gap:24px; }
 .appearance-customization > p { grid-area:copy; align-self:start; max-width:360px; margin:0; }
 .hero-feature-page .appearance-visual { grid-area:visual; max-width:410px; margin:0 auto; }
 .appearance-visual .store-crop { box-shadow:none; border-radius:16px; }
 #setup .story-heading { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:48px; max-width:none; align-items:center; }
 #setup .story-heading .h2 { margin:0; }
 #setup .setup-options { gap:12px; margin-top:36px; }
 .hero-feature-page #setup .setup-method { padding:26px; display:grid; gap:16px 20px; grid-template-columns:160px minmax(0,1fr) 28px minmax(0,1fr); align-items:center; }
 #setup-manual { grid-template-areas:"title before arrow label" "title before arrow after"; }
 #setup-manual h3 { grid-area:title; }
 #setup-manual .setup-manual-visual { grid-area:before; max-width:none; margin:0; }
 #setup-manual .setup-flow-arrow { grid-area:arrow; }
 #setup-manual .setup-result-title { grid-area:label; }
 #setup-manual .setup-reuse-visual { grid-area:after; max-width:none; margin:0; }
 .hero-feature-page #setup #setup-ai { grid-template-columns:160px minmax(0,1.6fr) 28px minmax(0,1fr); grid-template-areas:"title before arrow label" "copy before arrow after" "link before arrow after"; }
 #setup-ai h3 { grid-area:title; align-self:end; }
 #setup-ai .setup-ai-visual { grid-area:before; max-width:none; }
 #setup-ai > p:not(.setup-result-title) { grid-area:copy; margin:0; align-self:center; }
 #setup-ai .setup-flow-arrow { grid-area:arrow; }
 #setup-ai .setup-result-title { grid-area:label; align-self:end; }
 #setup-ai .setup-result-example { grid-area:after; }
 #setup-ai .text-link { grid-area:link; align-self:start; font-size:14px; margin:0; }
 #setup .setup-method .setup-flow-arrow { transform:rotate(-90deg); margin:0; color:var(--blue); font-size:32px; text-align:center; }
 .hero-feature-page #setup .setup-result-title { margin:0; font-size:16px; font-weight:700; }
 #setup .setup-plan-note { font-size:13px; }
 #history .story-in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 64px; align-items:center; }
 #history .story-heading { grid-column:1; grid-row:1 / 4; }
 #history .three-steps { grid-column:2; grid-row:1; margin:0; gap:12px; }
 #history .three-steps li { padding:16px 20px; font-size:16px; }
 #history .near-note { grid-column:2; grid-row:2; margin:0; }
 #history .text-link { grid-column:2; grid-row:3; margin:0; justify-self:start; }
 #own-data .story-in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 64px; align-items:center; }
 #own-data .story-heading { grid-column:1; grid-row:1; }
 .hero-feature-page #own-data .store-data { grid-column:1; grid-row:2; margin:0; max-width:none; align-self:start; }
 #own-data .two-cards { grid-column:2; grid-row:1 / 3; margin:0; grid-template-columns:1fr; gap:18px; }
 #own-data .start-card { padding:24px; }
 #analysis .story-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:64px; max-width:none; align-items:start; }
 #analysis .story-heading .pillar { grid-column:1; grid-row:1; }
 #analysis .story-heading .h2 { grid-column:1; grid-row:2; }
 #analysis .story-heading .story-body { grid-column:2; grid-row:1 / 3; align-self:center; margin:0; }
 .hero-feature-page #analysis .product-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 28px; align-items:start; margin-top:36px; }
 .hero-feature-page #analysis .store-analysis { display:contents; }
 .hero-feature-page #analysis .store-analysis > .store-crop:first-child { grid-column:1; grid-row:1 / 3; --cx:56 !important; --cw:470 !important; --ch:592 !important; aspect-ratio:470 / 592; width:100%; }
 .hero-feature-page #analysis .store-analysis > .store-crop:nth-child(2) { grid-column:2; grid-row:2; width:100%; }
 .hero-feature-page #analysis .product-row > .pc-analysis-history { display:block; grid-column:3; grid-row:1 / 3; width:100%; align-self:center; }
 #analysis .field-aside { grid-column:2; grid-row:1; align-self:end; }
 #analysis .field-aside h3 { font-size:20px; }
 #analysis .field-aside .near-note { margin-top:12px; font-size:13px; }
 .hero-feature-page .creed-in { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:16px 64px; }
 .creed-in > .pillar { grid-column:1; grid-row:1; align-self:end; }
 .creed-in > .h2 { grid-column:1; grid-row:2; margin:0; align-self:start; }
 .creed-in > .creed-list { grid-column:2; grid-row:1 / 4; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:0; }
 .creed-in .creed-list > li { display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; margin:0; padding:22px 18px; border:1px solid var(--line); border-radius:18px; background:#172646; align-content:start; }
 .creed-in .creed-list .n { font-size:16px; }
 .creed-in .creed-list .t { font-size:22px; line-height:1.45; }
 .creed-in .creed-list .b { font-size:14px; line-height:1.85; }
 .creed-in .creed-list .creed-noads { background:#1B2B50; border-color:#6F83D1; }
 .creed-in .creed-list .creed-noads .t { font-size:36px; }
 .creed-in > .creed-sign { grid-column:1; grid-row:3; align-self:start; text-align:left; margin:12px 0 0; color:var(--sub); }
 .hero-feature-page .pr-in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 48px; }
 .pr-head { grid-column:1; grid-row:1; align-self:center; }
 .hero-feature-page .store-plans { grid-column:2; grid-row:1; max-width:none; margin:0; }
 .hero-feature-page .pr-cards { grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 36px; grid-template-areas:"free div" "free pro"; align-items:start; margin:8px 0 0; }
 .pr-cards .plan--free { grid-area:free; }
 .pr-cards .pr-div { grid-area:div; margin:0; text-align:left; font-size:18px; color:var(--blue); }
 .pr-cards .plan--pro { grid-area:pro; margin:0; align-self:start; }
 .pr-cards .plan { padding:28px; }
 .pr-cards .plan-name { font-size:28px; }
 .pr-cards .cks { font-size:16px; }
 .hero-feature-page .pr-foot { grid-column:1 / -1; max-width:100%; margin:0; text-align:left; }
 .pr-foot .pr-n1, .pr-foot .pr-n2 { max-width:900px; }
 .hero-feature-page .faq-in { display:grid; grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr); gap:64px; align-items:start; }
 .faq-in .faq-h { margin:0; }
 .faq-in .faq-list { margin:0; }
 .hero-feature-page .cl-in { padding:72px 48px 64px; max-width:920px; text-align:center; }
 .hero-feature-page .cl-h { font-size:56px; line-height:1.3; margin-top:18px; }
 .hero-feature-page .cl-cta { max-width:320px; margin:30px auto 0; }
 .hero-feature-page .cl-pts { margin-top:24px; }
}
@media (min-width:768px) and (max-width:1023px) {
 .completed .hero--feature .hero-in { padding:40px 32px 52px; gap:0 28px; }
 .completed .hero--feature .hero-h1 { font-size:64px; }
 html:not([lang="ja"]) .completed .hero--feature .hero-h1 { font-size:52px; }
 .hero-feature-page .sec { padding:52px 32px; }
 .hero-feature-page .site-bar { padding-inline:32px; }
 .hero-feature-page .story-heading { max-width:660px; }
 .hero-feature-page .field-groups { margin-top:28px; }
 .hero-feature-page .exercise-examples { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .hero-feature-page .appearance-customization { margin-top:32px; padding-top:28px; }
 .hero-feature-page .appearance-visual { max-width:450px; }
 .hero-feature-page .setup-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
 .hero-feature-page .setup-or { display:none; }
 .hero-feature-page .setup-method { padding:22px; gap:18px; }
 .hero-feature-page .store-data { max-width:580px; }
 .hero-feature-page .store-analysis { max-width:600px; }
 .hero-feature-page .product-row { grid-template-columns:minmax(0,1fr) minmax(0,.6fr); gap:28px; }
 .hero-feature-page .creed-list { margin-top:30px; }
 .hero-feature-page .pr-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
 .hero-feature-page .pr-in, .hero-feature-page .creed-in, .hero-feature-page .faq-in { max-width:720px; }
 .hero-feature-page .cl-in { padding:64px 32px 48px; }
}

@media (min-width:1024px) {
 /* Align the same kinds of information across the three exercise examples. */
 #freedom-to .exercise-examples { grid-template-rows:repeat(4,auto); row-gap:0; }
 .hero-feature-page #freedom-to .exercise-example { display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0; }
 #freedom-to .exercise-example-heading { grid-row:1; align-self:start; }
 #freedom-to .exercise-example .machine-location { grid-row:2; margin-top:6px; align-self:start; }
 #freedom-to .exercise-example .exercise-values { grid-row:3; align-self:start; }
 #freedom-to .exercise-example .exercise-fields { grid-row:4; align-self:start; }
 #setup-manual .setup-reuse-visual .store-crop { --cy:770 !important; --ch:276 !important; aspect-ratio:486 / 276; }
 .hero-feature-page .pr-cards { grid-template-rows:auto 1fr; row-gap:18px; }
 .pr-cards .plan-hd { flex-wrap:wrap; gap:8px; }
 .pr-cards .plan--free { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px; }
 .plan--free .plan-hd { grid-column:1 / -1; grid-row:1; }
 .plan--free .plan-band { grid-column:1 / -1; grid-row:2; }
 .plan--free > .grp:nth-of-type(1) { grid-column:1; grid-row:3; }
 .plan--free > .cks:nth-of-type(1) { grid-column:1; grid-row:4; }
 .plan--free > .grp:nth-of-type(2) { grid-column:2; grid-row:3; }
 .plan--free > .cks:nth-of-type(2) { grid-column:2; grid-row:4; }
 .plan--free > .grp:nth-of-type(3) { grid-column:1 / -1; grid-row:5; }
 .plan--free > .cks:nth-of-type(3) { grid-column:1 / -1; grid-row:6; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; }
 .plan--free > .grp { border:0; margin-top:18px; padding-top:0; }
}

/* Custom fields: the available types lead, followed by original Store UI. */
@media (min-width:768px) {
 .hero-feature-page #freedom-to .custom-fields-feature {
  margin-top:36px; padding:32px; border:1px solid #6475B0; border-radius:28px;
  background:linear-gradient(125deg,#253568 0%,#1B2A50 48%,#172646 100%);
  scroll-margin-top:100px;
 }
 .hero-feature-page #freedom-to .custom-fields-feature > .field-group-title {
  font-size:36px; line-height:1.35; margin:0 0 20px; gap:12px 20px;
 }
 .custom-fields-feature > .field-group-title .field-plan { font-size:14px; }
 .hero-feature-page .custom-fields-intro { display:block; margin-bottom:24px; }
 .custom-fields-lead { font-size:26px; font-weight:700; line-height:1.55; margin:0; letter-spacing:-.025em; }
 .custom-fields-body { font-size:15px; line-height:1.8; color:var(--body2); margin:8px 0 0; }
 .hero-feature-page .custom-fields-showcase {
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:32px; align-items:start; margin-bottom:32px;
 }
 .custom-type-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; min-width:0; }
 .custom-type-example { padding:11px 14px; border-radius:14px; background:#2B3E6C; min-width:0; }
 .custom-type-example dt { color:#C4CDFF; font-size:13px; font-weight:700; line-height:1.5; }
 .custom-type-example dd { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; margin:2px 0 0; font-size:17px; line-height:1.5; }
 .custom-type-example dd > span { color:var(--body2); font-size:15px; }
 .custom-type-example dd > strong { font-weight:700; }
 .custom-type-example .custom-multi-values { display:flex; flex-wrap:wrap; gap:4px; font-size:14px; }
 .custom-multi-values > span { border:1px solid #8997D3; border-radius:6px; padding:1px 6px; background:#394B7D; }
 .custom-control { margin:0; min-width:0; }
 .custom-control figcaption { margin:0 0 12px; }
 .custom-control figcaption strong { display:block; font-size:19px; line-height:1.5; font-weight:700; }
 .custom-control .store-crop { width:100%; border-radius:16px; box-shadow:0 12px 28px #060F2428; background:#fff; }
 .custom-screen-note { margin:10px 0 0; color:var(--sub); font-size:12px; line-height:1.5; }
 .hero-feature-page .custom-examples-label { display:block; font-size:15px; font-weight:700; color:var(--sub); margin:0 0 14px; }
 .hero-feature-page #freedom-to .custom-fields-feature .exercise-example { padding:20px; background:#152442; border-color:#53648E; }
 .hero-feature-page #freedom-to .custom-fields-feature .exercise-example-heading h4 { font-size:18px; }
 .hero-feature-page #freedom-to .custom-fields-feature .exercise-values { font-size:20px; padding:12px; }
 .hero-feature-page #freedom-to .custom-fields-feature .exercise-fields { gap:6px; }
 .hero-feature-page #freedom-to .custom-fields-feature .exercise-fields > div { padding:5px 8px; }
}
@media (min-width:768px) and (max-width:1023px) {
 .hero-feature-page #freedom-to .custom-fields-feature { padding:28px; }
 .hero-feature-page .custom-fields-showcase { grid-template-columns:1fr; gap:28px; }
 .custom-control { width:100%; max-width:450px; justify-self:center; }
 .custom-fields-lead { font-size:24px; }
}


/* Mobile: show the same ten custom field types with their concrete examples. */
@media (max-width:767px) {
 .hero-feature-page #custom-fields .custom-fields-intro { display:block; margin:0 0 18px; }
 .hero-feature-page #custom-fields .custom-fields-lead { font-size:20px; font-weight:700; line-height:1.6; margin:0; }
 .hero-feature-page #custom-fields .custom-fields-body { font-size:14px; line-height:1.7; color:var(--body2); margin:8px 0 0; }
 .hero-feature-page #custom-fields .custom-fields-showcase { display:block; margin:0 0 26px; }
 .hero-feature-page #custom-fields .custom-type-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; min-width:0; }
 .hero-feature-page #custom-fields .custom-type-example { min-width:0; padding:12px; border:1px solid #445985; border-radius:12px; background:#23365D; }
 .hero-feature-page #custom-fields .custom-type-example dt { margin:0; color:#C4CDFF; font-size:13px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
 .hero-feature-page #custom-fields .custom-type-example dd { display:flex; flex-wrap:wrap; align-content:start; gap:3px 6px; margin:6px 0 0; font-size:16px; line-height:1.55; overflow-wrap:anywhere; }
 .hero-feature-page #custom-fields .custom-type-example dd > span { flex-basis:100%; color:var(--body2); font-size:13px; }
 .hero-feature-page #custom-fields .custom-type-example dd > strong { font-weight:700; }
 .hero-feature-page #custom-fields .custom-multi-values { display:flex; flex-wrap:wrap; gap:4px; font-size:13px; }
 .hero-feature-page #custom-fields .custom-multi-values > span { padding:1px 5px; border:1px solid #8997D3; border-radius:5px; background:#394B7D; }
 .hero-feature-page #custom-fields .custom-control { display:none; }
 .hero-feature-page #custom-fields .custom-examples-label { display:block; margin:0 0 14px; color:var(--sub); font-size:15px; font-weight:700; line-height:1.6; }
}