/* 2026-10-21 font switch: Roboto/Lora/etc -> var(--th-font-sans) Instrument Sans (was th-product-doors-1.3.0.css) */
/* TH Product Doors 1.3.0
   Reusable "three doorways" product tile system (th-product-door-*, th-pd-*). First used on /data-solutions
   ("Three solutions, one data foundation."). Layout and visuals only; all copy lives in Webflow.
   Colour policy: every colour below maps to a Third Horizon brand token (or a neutral/alpha of one). No teal/green.
     brand blue (dark)  #167eaa  22,126,170   brand ink        #0d2c3c / #213F56
     brand blue (light) #52a9ce  82,169,206   brand surface    #0a2433 (dark)
     brand gold         #d4a43a  212,164,58   brand gold light #F7C560 247,197,96   quiet #6f828a
   1.3.0: all three doors share ONE gold treatment (#d4a43a light / #F7C560 dark) so no product is favoured; products are told
   apart by name and picture only. Per-product tokens --pd-door-data / --pd-door-search / --pd-door-rates (RGB triplets, one
   line per theme below) still drive each tile's --pd-hue, so a per-product colour can come back with a one-line change.
   Vignette labels come from data-label attributes (words taken from the existing copy), drawn with CSS;
   vignettes are aria-hidden and add no text nodes. */
@property --pd-angle{syntax:"<angle>";inherits:false;initial-value:0deg}

.th-product-doors{
  --pd-card:#ffffff;--pd-card-rgb:255,255,255;--pd-card-2:#f6f9fa;--pd-ink:#0d2c3c;--pd-body:#405b68;--pd-feature:#213f56;
  --pd-media-bg:#f8f4ea;--pd-line:rgba(13,44,60,.10);--pd-focus:#0d2c3c;
  --pd-sheet:#ffffff;--pd-sheet-line:rgba(13,44,60,.10);--pd-skel:rgba(13,44,60,.10);--pd-label:#405b68;
  --pd-shadow:0 1px 2px rgba(13,44,60,.05),0 10px 24px -14px rgba(13,44,60,.20);
  --th-gold:212,164,58;--th-gold-light:247,197,96;
  --pd-door-data:var(--th-gold);--pd-door-search:var(--th-gold);--pd-door-rates:var(--th-gold);
  --pd-hue:var(--th-gold);
  --th-blue-deep:22,126,170;--th-blue-light:82,169,206;--th-gold:212,164,58;--th-gold-light:247,197,96;
  position:relative;isolation:isolate;display:block;margin-top:clamp(36px,5vw,64px);padding-bottom:clamp(40px,4.5vw,64px);
  font-family:var(--th-font-sans,Instrument Sans,system-ui,sans-serif);
}
html.thp-theme-dark .th-product-doors{
  --pd-card:#0f2d3d;--pd-card-rgb:15,45,61;--pd-card-2:#0b2433;--pd-ink:#f2f5f4;--pd-body:#bccbd0;--pd-feature:#dbe5e8;
  --pd-media-bg:#0c2838;--pd-line:rgba(229,238,240,.10);--pd-focus:#F7C560;
  --pd-sheet:#123447;--pd-sheet-line:rgba(229,238,240,.10);--pd-skel:rgba(229,238,240,.13);--pd-label:#bccbd0;
  --pd-shadow:0 1px 2px rgba(0,0,0,.35),0 24px 48px -28px rgba(0,0,0,.75);
  --pd-door-data:var(--th-gold-light);--pd-door-search:var(--th-gold-light);--pd-door-rates:var(--th-gold-light);
  --pd-hue:var(--th-gold-light);
}
/* Per-product accents: each door reads its own token (all gold in 1.3.0). Shared, equal treatment for every door. */
.th-product-door{--pd-hue-ink:rgb(var(--pd-hue));--pd-band:rgba(var(--pd-hue),.14);--pd-band-ink:var(--pd-ink)}
.th-product-door[data-door="data"]{--pd-hue:var(--pd-door-data)}
.th-product-door[data-door="search"]{--pd-hue:var(--pd-door-search)}
.th-product-door[data-door="rates"]{--pd-hue:var(--pd-door-rates)}
.th-product-doors,.th-product-doors *{box-sizing:border-box}

/* Section framing: ambient field behind the trio + a lit "foundation" line under it */
.th-product-doors::before{content:"";position:absolute;z-index:-1;left:-4%;right:-4%;top:6%;bottom:4%;pointer-events:none;
  background:
    radial-gradient(62% 60% at 50% 55%,rgba(var(--th-gold-light),.08),transparent 72%)}
html:not(.thp-theme-dark) .th-product-doors::before{background:radial-gradient(62% 60% at 50% 55%,rgba(var(--th-gold),.10),transparent 72%)}
.th-product-doors::after{content:"";position:absolute;left:4%;right:4%;bottom:calc(clamp(40px,4.5vw,64px)/2);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--th-gold-light),.75) 50%,transparent);
  box-shadow:0 0 18px 1px rgba(var(--th-gold-light),.28)}
html:not(.thp-theme-dark) .th-product-doors::after{background:linear-gradient(90deg,transparent,rgba(var(--th-gold),.7) 50%,transparent);box-shadow:0 0 14px rgba(var(--th-gold),.22)}

.th-product-doors-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,1.9vw,28px);align-items:stretch;padding:0;background:none;border:0}

/* Tile */
.th-product-door{
  position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden;
  border:1px solid transparent;border-radius:18px;color:var(--pd-ink);
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(var(--pd-hue),.10),transparent 62%) padding-box,
    linear-gradient(180deg,var(--pd-card) 0%,var(--pd-card-2) 100%) padding-box,
    linear-gradient(180deg,rgba(var(--pd-hue),.85) 0%,rgba(var(--pd-hue),.28) 22%,var(--pd-line) 55%,var(--pd-line) 100%) border-box;
  box-shadow:var(--pd-shadow),0 18px 60px -26px rgba(var(--pd-hue),.55),0 0 90px -40px rgba(var(--pd-hue),.55);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}
html:not(.thp-theme-dark) .th-product-door{
  background:
    radial-gradient(120% 55% at 50% 0%,rgba(var(--pd-hue),.07),transparent 62%) padding-box,
    linear-gradient(180deg,var(--pd-card) 0%,var(--pd-card-2) 100%) padding-box,
    linear-gradient(180deg,rgba(var(--pd-hue),.55) 0%,rgba(var(--pd-hue),.18) 24%,rgba(13,44,60,.08) 55%,rgba(13,44,60,.10) 100%) border-box;
  box-shadow:0 1px 2px rgba(120,86,20,.06),0 12px 28px -16px rgba(120,86,20,.22),0 34px 64px -34px rgba(var(--pd-hue),.45);
}
/* top edge light */
.th-product-door::after{content:"";position:absolute;z-index:3;left:12%;right:12%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--pd-hue),1),transparent);box-shadow:0 0 14px 1px rgba(var(--pd-hue),.6)}
html:not(.thp-theme-dark) .th-product-door::after{box-shadow:none;opacity:.8}
/* hover: slow travelling border light (static when reduced motion) */
.th-product-door::before{content:"";position:absolute;z-index:4;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--pd-angle),transparent 0deg,rgba(var(--pd-hue),.95) 40deg,transparent 95deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity .4s ease}
.th-product-door:hover::before,.th-product-door:focus-within::before{opacity:1;animation:th-pd-orbit 6s linear infinite}
@keyframes th-pd-orbit{to{--pd-angle:360deg}}
.th-product-door:hover,.th-product-door:focus-within{
  box-shadow:var(--pd-shadow),0 22px 70px -24px rgba(var(--pd-hue),.75),0 0 120px -36px rgba(var(--pd-hue),.7)}
html:not(.thp-theme-dark) .th-product-door:hover,html:not(.thp-theme-dark) .th-product-door:focus-within{
  box-shadow:0 1px 2px rgba(120,86,20,.06),0 18px 36px -18px rgba(120,86,20,.26),0 40px 70px -32px rgba(var(--pd-hue),.55)}
.th-product-door:has(a[href]):hover,.th-product-door:has(a[href]):focus-within{transform:translateY(-4px)}

/* Media stage: full-bleed top, ~38% of the tile; the name sits on its faded lower edge */
.th-product-door-media{
  position:relative;overflow:hidden;margin:0;flex:0 0 auto;aspect-ratio:3/2;border:0;border-radius:17px 17px 0 0;
  background:
    radial-gradient(70% 80% at 50% 30%,rgba(var(--pd-hue),.22),transparent 72%),
    repeating-linear-gradient(90deg,rgba(var(--pd-hue),.055) 0 1px,transparent 1px 32px),
    var(--pd-media-bg);
}
html:not(.thp-theme-dark) .th-product-door-media{background:
    radial-gradient(70% 80% at 50% 30%,rgba(var(--pd-hue),.16),transparent 72%),
    radial-gradient(rgba(var(--pd-hue),.16) 1px,transparent 1.2px) 0 0/16px 16px,
    var(--pd-media-bg)}
.th-product-door-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 56%,var(--pd-card) 93%)}
.th-pd-art{position:absolute;inset:0;z-index:1}
.th-product-door-media:has(.th-product-door-shot)::after{background:linear-gradient(180deg,transparent 34%,rgba(var(--pd-card-rgb),.82) 66%,var(--pd-card) 80%)}

/* Data Service: layered dataset with real column words from the copy */
[data-door="data"] .th-pd-art{perspective:900px}
.th-pd-sheet,.th-pd-table{position:absolute;left:11%;right:11%;border-radius:10px;border:1px solid var(--pd-sheet-line);background:var(--pd-sheet)}
.th-pd-sheet{top:7%;height:52%;transform:scale(.88);opacity:.45;box-shadow:0 0 0 1px rgba(var(--pd-hue),.12)}
.th-pd-sheet + .th-pd-sheet{top:11%;transform:scale(.94);opacity:.7}
.th-pd-table{top:16%;padding:0 0 6px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(var(--pd-hue),.25),0 18px 40px -16px rgba(0,0,0,.45),0 0 44px -10px rgba(var(--pd-hue),.45)}
html:not(.thp-theme-dark) .th-pd-table{box-shadow:0 0 0 1px rgba(var(--pd-hue),.18),0 16px 30px -18px rgba(13,44,60,.35)}
.th-pd-cols,.th-pd-row{display:grid;grid-template-columns:1.3fr .8fr 1fr 1.1fr;gap:10px;padding:0 14px}
.th-pd-cols{padding-top:10px;padding-bottom:9px;border-bottom:1px solid var(--pd-sheet-line);background:var(--pd-band)}
.th-pd-col::before{content:attr(data-label);display:block;font-size:9.5px;line-height:1;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--pd-band-ink);white-space:nowrap}
.th-pd-row{height:21px;align-items:center;
  background:
    linear-gradient(var(--pd-skel),var(--pd-skel)) 14px 50%/calc((100% - 58px)*.26) 5px no-repeat,
    linear-gradient(var(--pd-skel),var(--pd-skel)) calc(14px + (100% - 58px)*.309 + 10px) 50%/calc((100% - 58px)*.12) 5px no-repeat,
    linear-gradient(var(--pd-skel),var(--pd-skel)) calc(14px + (100% - 58px)*.5 + 20px) 50%/calc((100% - 58px)*.18) 5px no-repeat,
    linear-gradient(var(--pd-skel),var(--pd-skel)) calc(14px + (100% - 58px)*.738 + 30px) 50%/calc((100% - 58px)*.2) 5px no-repeat;
  border-bottom:1px solid var(--pd-sheet-line)}
.th-pd-row:last-child{border-bottom:0}
.th-pd-row:nth-child(3){background-color:rgba(var(--pd-hue),.16);box-shadow:inset 2px 0 0 rgba(var(--pd-hue),1)}
.th-pd-row:nth-child(4){background-size:calc((100% - 58px)*.2) 5px,calc((100% - 58px)*.16) 5px,calc((100% - 58px)*.12) 5px,calc((100% - 58px)*.24) 5px}

/* Starset: one prompt field with a soft caret + suggestion chips (words from the copy) */
[data-door="search"] .th-pd-art{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:13% 9% 0;gap:14px}
[data-door="search"] .th-pd-art::before{content:"";position:absolute;left:50%;top:27%;width:90%;height:60%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--pd-hue),.22),transparent);pointer-events:none}
.th-pd-prompt{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;width:100%;height:50px;padding:0 7px 0 18px;border-radius:14px;
  background:var(--pd-sheet);border:1px solid rgba(var(--pd-hue),.55);
  box-shadow:0 0 0 4px rgba(var(--pd-hue),.10),0 16px 40px -14px rgba(0,0,0,.45),0 0 48px -8px rgba(var(--pd-hue),.55)}
html:not(.thp-theme-dark) .th-pd-prompt{box-shadow:0 0 0 4px rgba(var(--pd-hue),.08),0 14px 30px -16px rgba(13,44,60,.35)}
.th-pd-prompt-text{display:flex;align-items:center;min-width:0}
.th-pd-prompt-text::before{content:attr(data-label);font-size:16px;font-weight:500;letter-spacing:-.005em;color:var(--pd-ink);white-space:nowrap}
.th-pd-prompt-text::after{content:"";width:2px;height:20px;margin-left:3px;border-radius:2px;background:var(--pd-hue-ink);box-shadow:0 0 8px rgba(var(--pd-hue),.9);animation:th-pd-caret 1.15s ease-in-out infinite}
@keyframes th-pd-caret{0%,45%{opacity:1}55%,100%{opacity:.15}}
.th-pd-send{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:rgba(var(--pd-hue),1);position:relative}
.th-pd-send::after{content:"";position:absolute;inset:9px;background:#0d2c3c;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.th-pd-chips{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.th-pd-chip::before{content:attr(data-label);display:inline-block;padding:7px 12px;border-radius:999px;font-size:12px;line-height:1;font-weight:600;white-space:nowrap;
  color:var(--pd-label);background:var(--pd-sheet);border:1px solid var(--pd-sheet-line)}

/* Rate Compass: payer rate-range gauge with three markers named in the copy (no figures) + compass mark */
.th-pd-gauge{position:absolute;left:11%;right:11%;top:16%;border-radius:10px;border:1px solid var(--pd-sheet-line);background:var(--pd-sheet);overflow:hidden;
  box-shadow:0 0 0 1px rgba(var(--pd-hue),.25),0 18px 40px -16px rgba(0,0,0,.45),0 0 44px -10px rgba(var(--pd-hue),.4)}
html:not(.thp-theme-dark) .th-pd-gauge{box-shadow:0 0 0 1px rgba(var(--pd-hue),.22),0 16px 30px -18px rgba(13,44,60,.35)}
.th-pd-gauge-head{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--pd-sheet-line);background:var(--pd-band)}
.th-pd-gauge-head::before{content:"";flex:0 0 auto;width:17px;height:17px;background:var(--pd-hue-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 4.5l2.4 7.5L12 19.5 9.6 12z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 4.5l2.4 7.5L12 19.5 9.6 12z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat}
.th-pd-gauge-head::after{content:attr(data-label);font-size:9.5px;line-height:1;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--pd-band-ink);white-space:nowrap}
.th-pd-track{position:relative;margin:50px 20px 38px;height:10px;border-radius:999px;
  background:linear-gradient(90deg,rgba(var(--pd-hue),.10) 0%,rgba(var(--pd-hue),.55) 28%,rgba(var(--pd-hue),.38) 58%,rgba(var(--pd-hue),.18) 86%,rgba(var(--pd-hue),.06) 100%);
  box-shadow:inset 0 0 0 1px rgba(var(--pd-hue),.25)}
.th-pd-track::after{content:"";position:absolute;left:0;right:0;top:18px;height:6px;
  background:repeating-linear-gradient(90deg,var(--pd-skel) 0 1px,transparent 1px 10%);border-left:1px solid var(--pd-skel);border-right:1px solid var(--pd-skel)}
.th-pd-marker{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--pd-sheet);border:2px solid rgb(var(--pd-hue))}
.th-pd-marker:nth-child(1){left:26%;background:rgb(var(--pd-hue));box-shadow:0 0 0 4px rgba(var(--pd-hue),.18),0 0 14px rgba(var(--pd-hue),.8)}
.th-pd-marker:nth-child(2){left:56%}
.th-pd-marker:nth-child(3){left:86%}
.th-pd-marker:nth-child(3)::after{transform:translateX(-66%)}
.th-pd-marker::before{content:"";position:absolute;left:50%;bottom:calc(100% + 1px);width:0;height:14px;border-left:1.5px solid rgba(var(--pd-hue),.85);transform:translateX(-50%)}
.th-pd-marker:nth-child(3)::before{border-left-style:dashed}
.th-pd-marker::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 18px);transform:translateX(-50%);
  font-size:11.5px;line-height:1;font-weight:600;letter-spacing:.01em;white-space:nowrap;color:var(--pd-label)}
.th-pd-marker:nth-child(1)::after{color:var(--pd-ink)}

/* Screenshot variant (real product UI): tightly cropped, framed window, floated as a framed window, toned for dark UI */
.th-product-door-shot{position:absolute;z-index:1;left:8%;top:9%;width:160%!important;height:auto!important;max-width:none!important;aspect-ratio:880/420;object-fit:cover;object-position:0 0;
  border-radius:10px;border:1px solid rgba(var(--pd-hue),.45);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.6),0 0 54px -10px rgba(var(--pd-hue),.5);transition:transform .6s cubic-bezier(.2,.7,.2,1);filter:none!important}
html.thp-theme-dark .th-product-door-shot{filter:brightness(.88) saturate(.95) contrast(1.03)!important}
html.thp-theme-dark .th-product-door-media:has(.th-product-door-shot)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(120deg,rgba(10,36,51,0) 30%,rgba(10,36,51,.28) 100%)}
html:not(.thp-theme-dark) .th-product-door-shot{box-shadow:0 16px 34px -18px rgba(13,44,60,.4),0 0 0 4px rgba(var(--pd-hue),.08)}
.th-product-door:hover .th-product-door-shot{transform:translateY(-3px)}

/* Head: mark + large product name, overlapping the media fade */
.th-product-door-head{position:relative;z-index:3;display:flex;align-items:center;gap:12px;margin:-50px 0 0;padding:0 26px;min-width:0}
.th-product-door-mark{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;line-height:0;font-size:0;
  background:rgba(var(--pd-hue),.14);border:1px solid rgba(var(--pd-hue),.4);box-shadow:0 0 22px -4px rgba(var(--pd-hue),.6)}
.th-product-door-mark .th-xl-icon{margin:0!important;display:block!important;line-height:0}
.th-product-door-mark .th-xl-icon::before,.th-product-door-mark .th-xl-icon:before{width:20px!important;height:20px!important;margin:0!important;background-color:var(--pd-hue-ink)!important}
.th-product-door-name{display:block;min-width:0;color:var(--pd-ink);font-size:clamp(24px,2.05vw,30px);line-height:1.12;font-weight:700;letter-spacing:-.022em}

/* Body */
.th-product-door-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:14px 26px 24px}
.th-product-door-content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.th-product-door-desc{margin:0;color:var(--pd-body);font-size:15px;line-height:1.55}
.th-product-door-features{list-style:none;margin:18px 0 0;padding:0;border:0;display:grid;gap:9px}
.th-product-door-feature{display:grid;grid-template-columns:15px minmax(0,1fr);gap:11px;align-items:start;margin:0;padding:0;
  color:var(--pd-feature);font-size:13.75px;line-height:1.6;cursor:default}
.th-product-door-feature .th-xl-icon{margin:4px 0 0!important;display:block!important;line-height:0}
.th-product-door-feature .th-xl-icon::before,.th-product-door-feature .th-xl-icon:before{width:15px!important;height:15px!important;margin:0!important;background-color:var(--pd-hue-ink)!important}
.th-product-door-note:empty{display:none}

/* Doorway CTA (pinned to the tile bottom so CTAs align across a row) */
/* Doorway CTA is centred on the tile at every width (shared rule: any card's CTA centres) */
.th-product-door-cta{margin-top:auto;padding-top:20px;display:flex;justify-content:center;text-align:center}
.th-product-door-button{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:10px;
  background:#0d2c3c;color:#ffffff!important;font-size:14px;font-weight:700;letter-spacing:.01em;text-decoration:none!important;
  box-shadow:0 10px 22px -12px rgba(13,44,60,.6);transition:background .2s ease,box-shadow .2s ease}
html.thp-theme-dark .th-product-door-button{background:rgb(var(--pd-hue));color:#0d2c3c!important;box-shadow:0 10px 30px -10px rgba(var(--pd-hue),.7)}
.th-product-door-button::after{content:"";width:16px;height:16px;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s ease}
html:not(.thp-theme-dark) .th-product-door-button::after{background-color:#F7C560}
.th-product-door-button:hover{background:#213F56}
html.thp-theme-dark .th-product-door-button:hover{background:#d4a43a}
.th-product-door-button:hover::after{transform:translateX(3px)}
.th-product-door-button:focus-visible{outline:3px solid var(--pd-focus);outline-offset:3px}

/* Staggered entrance on scroll (scroll-driven, no JS; skipped when unsupported or reduced motion) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .th-product-door{animation:th-pd-enter linear both;animation-timeline:view();animation-range:entry 5% entry 75%}
    .th-product-door:nth-child(2){animation-range:entry 15% entry 85%}
    .th-product-door:nth-child(3){animation-range:entry 25% entry 95%}
    @keyframes th-pd-enter{from{opacity:0;translate:0 36px}to{opacity:1;translate:0 0}}
  }
}

/* Tablet (<=991): one column of horizontal doorways (stage left, content right) */
@media (max-width:991px){
  .th-product-doors-grid{grid-template-columns:1fr;gap:22px}
  .th-product-door{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);grid-template-rows:auto 1fr}
  .th-product-door-media{grid-column:1;grid-row:1 / span 2;aspect-ratio:auto;min-height:100%;border-radius:17px 0 0 17px}
  .th-product-door-media::after{background:linear-gradient(90deg,transparent 86%,var(--pd-card) 100%)}
  .th-product-door-media:has(.th-product-door-shot)::after{background:linear-gradient(90deg,transparent 55%,rgba(var(--pd-card-rgb),.85) 88%,var(--pd-card) 100%)}
  .th-product-door-head{grid-column:2;margin:0;padding:24px 26px 0}
  .th-product-door-body{grid-column:2;padding:10px 26px 24px}
  .th-pd-sheet,.th-pd-table,.th-pd-gauge{left:8%;right:4%}
  .th-pd-table,.th-pd-gauge{top:50%;transform:translateY(-50%)}
  .th-pd-sheet{top:calc(50% - 82px);height:120px}
  .th-pd-sheet + .th-pd-sheet{top:calc(50% - 70px)}
  [data-door="search"] .th-pd-art{justify-content:center;padding:0 7% 0 8%}
  [data-door="search"] .th-pd-art::before{top:50%}
  .th-product-door-shot{top:50%;left:8%;width:230%!important;transform:translateY(-50%)}
  .th-product-door:hover .th-product-door-shot{transform:translateY(calc(-50% - 3px))}
}
/* Mobile (<=600): stack, stage on top */
/* Tablet only: the CTA becomes a full-width footer row under stage + content so it can centre on the whole tile.
   body/content dissolve (display:contents) so desc, features and CTA place directly on the tile grid. */
@media (min-width:601px) and (max-width:991px){
  .th-product-door{grid-template-rows:auto auto 1fr auto}
  .th-product-door-media{grid-row:1 / 4}
  .th-product-door:has(.th-product-door-cta) .th-product-door-media{border-radius:17px 0 0 0}
  .th-product-door-body,.th-product-door-content{display:contents}
  .th-product-door-desc{grid-column:2;grid-row:2;padding:10px 26px 0}
  .th-product-door-features{grid-column:2;grid-row:3;align-self:start;margin:18px 26px 24px}
  .th-product-door-note{grid-column:2}
  .th-product-door-cta{grid-column:1 / -1;grid-row:4;margin:0;padding:18px 26px 22px;border-top:1px solid var(--pd-line)}
}
@media (max-width:600px){
  .th-product-doors-grid{gap:20px}
  .th-product-door{display:flex;flex-direction:column}
  .th-product-door-media{aspect-ratio:16/10;min-height:0;border-radius:17px 17px 0 0}
  .th-product-door-media::after{background:linear-gradient(180deg,transparent 50%,var(--pd-card) 92%)}
  .th-product-door-media:has(.th-product-door-shot)::after{background:linear-gradient(180deg,transparent 34%,rgba(var(--pd-card-rgb),.82) 64%,var(--pd-card) 80%)}
  .th-product-door-head{margin:-44px 0 0;padding:0 20px;gap:11px}
  .th-product-door-mark{width:34px;height:34px;border-radius:10px}
  .th-product-door-name{font-size:24px}
  .th-product-door-body{padding:12px 20px 22px}
  .th-product-door-desc{font-size:15px}
  .th-product-door-feature{font-size:14px}
  .th-pd-sheet,.th-pd-table,.th-pd-gauge{left:9%;right:9%}
  .th-pd-table,.th-pd-gauge{top:16%;transform:none}
  .th-pd-sheet{top:7%;height:56%}
  .th-pd-sheet + .th-pd-sheet{top:11%}
  [data-door="search"] .th-pd-art{justify-content:flex-start;padding:13% 8% 0}
  [data-door="search"] .th-pd-art::before{top:30%}
  .th-product-door-shot{top:9%;left:7%;width:190%!important;transform:none}
  .th-product-door:hover .th-product-door-shot{transform:none}
  .th-product-door-button{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .th-product-door,.th-product-door-shot,.th-product-door-button,.th-product-door-button::after,.th-product-door::before{transition:none}
  .th-product-door:hover::before,.th-product-door:focus-within::before{animation:none}
  .th-pd-prompt-text::after{animation:none}
  .th-product-door:has(a[href]):hover,.th-product-door:has(a[href]):focus-within{transform:none}
  .th-product-door:hover .th-product-door-shot{transform:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:991px) and (min-width:601px){
  .th-product-door:hover .th-product-door-shot{transform:translateY(-50%)}
}
@media (forced-colors:active){
  .th-product-door{border:1px solid CanvasText;background:Canvas}
  .th-product-door::before,.th-product-door::after{display:none}
  .th-product-door-button{border:1px solid ButtonText}
}