@font-face{font-family:"365 Channel";src:url("/assets/fonts/Anton-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
html[data-portal-family] .signal-board{margin:3rem 0 3.25rem}
html[data-portal-family] .signal-tile{container-type:inline-size;background:transparent!important;overflow:visible!important}
html[data-portal-family] .signal-tile:before,html[data-portal-family] .signal-tile:after{display:none!important}
html[data-portal-family] .tile-rest{display:block!important}
html[data-portal-family] .tile-network{display:none}
html[data-portal-family] .family-name .tile-prefix{color:inherit}
html[data-portal-family] .tile-reveal{display:block!important;place-items:initial!important;align-content:initial!important}
html[data-portal-family] .tile-reveal strong{display:block;position:relative;z-index:2;text-align:left;white-space:normal!important;text-wrap:pretty;overflow-wrap:normal;word-break:normal;hyphens:none}
html[data-portal-family] .tile-reveal:after{display:none!important}
.family-action{display:flex;position:absolute;z-index:2;align-items:center;gap:9px;padding-bottom:4px;border-bottom:1px solid currentColor;font:600 14px/1.2 Arial,"Microsoft YaHei",sans-serif}
.family-action i{font-size:11px}
html[data-portal-family] .signal-board.is-intro .signal-tile:not(.is-flipped):not(.is-touch-active) .tile-flap{transform:none!important}
html[data-portal-family] .board-trigger{width:auto;height:38px;padding:0 14px;gap:10px;background:#F2EFE6;color:#101010;font:700 13px/1 Arial,"Microsoft YaHei",sans-serif;isolation:isolate;overflow:hidden}
html[data-portal-family] .board-trigger::after{content:"";position:absolute;left:var(--hover-x,50%);top:var(--hover-y,50%);width:var(--hover-diameter,0px);height:var(--hover-diameter,0px);border-radius:50%;z-index:-1;pointer-events:none;background:var(--orange);transform:translate(-50%,-50%) scale(0);transition:transform .38s cubic-bezier(.22,.7,.25,1)}
html[data-portal-family] .board-trigger.is-hovered::after{transform:translate(-50%,-50%) scale(1)}
html[data-portal-family] .board-trigger:focus-visible::after{inset:0;width:auto;height:auto;border-radius:0;transform:none;transition:none}
html[data-portal-family] .board-trigger:before{width:18px;height:18px;order:2}
html[data-portal-family] .board-trigger span{position:static;width:auto;height:auto;margin:0;clip-path:none;overflow:visible;font-size:13px}
html[data-portal-family] .family-caption{white-space:normal;max-width:100%;overflow-wrap:anywhere}
html[data-portal-family]:is([lang=en],[lang=de],[lang=fr],[lang=es],[lang=pt-BR]) .family-back-sample .tile-reveal strong{font-size:clamp(18px,7.2cqw,31px)!important}
@media(prefers-reduced-motion:reduce){html[data-portal-family] .signal-board .tile-flap{transition:none!important;transform:none!important}html[data-portal-family] .tile-reveal{display:none!important;transform:none!important}html[data-portal-family] .signal-tile:is(.is-flipped,.is-touch-active) .tile-rest{display:none!important}html[data-portal-family] .signal-tile:is(.is-flipped,.is-touch-active) .tile-reveal{display:block!important}}


/* Twelve small channel mascots, isolated from the restored homepage. */
html[data-portal-family] .signal-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  min-width: 0;
  gap: 32px;
  padding: 0;
  border: 0 !important;
  background: transparent;
}
html[data-portal-family] .signal-tile {
  aspect-ratio: 1672 / 941;
  min-width: 0;
  min-height: 0;
}
html[data-portal-family] .family-sample .tile-rest {
  background: #101010 !important;
  color: #f3f0e8 !important;
  border: 1px solid transparent;
  padding: 0 !important;
}
.family-copy {
  position: absolute;
  z-index: 2;
  left: 6.5%;
  top: 12%;
  width: 51%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.family-caption {
  color: #f3f0e8;
  font: 600 clamp(13px, 4cqw, 18px)/1.2 Arial, 'Microsoft YaHei', sans-serif;
  white-space: nowrap;
}
.family-name {
  color: #f3f0e8;
  font: 400 clamp(40px, 16cqw, 70px)/1 '365 Channel', Impact, sans-serif;
  letter-spacing: -.025em;
}
.family-sample[data-site='coupon'] .family-name { font-size: clamp(32px, 12.4cqw, 55px); }
.family-character {
  position: absolute;
  z-index: 1;
  width: min(43%, 182px);
  height: min(78%, 182px);
  right: 3.5%;
  top: 50%;
  transform: translateY(-50%);
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}
html[data-portal-family] .family-sample .tile-reveal {
  background: var(--signal-color) !important;
  color: var(--signal-ink) !important;
  border-color: var(--signal-color);
}
html[data-portal-family] .family-sample .family-action { color: inherit; }
html[data-portal-family] .family-back-sample .tile-reveal {
  padding: 6.5% !important;
  overflow: hidden;
  color: var(--signal-ink) !important;
}
html[data-portal-family] .family-back-sample[data-site='ai'] .tile-reveal { color: #f3f0e8 !important; }
html[data-portal-family] .family-back-sample .tile-reveal strong {
  max-width: 72%;
  font: 800 clamp(25px, 8.8cqw, 38px)/1.14 Arial, 'Microsoft YaHei', sans-serif !important;
  letter-spacing: -.035em;
}
.family-back-sample .tile-reveal strong span { display: block; }
html[data-portal-family] .family-back-sample .family-action {
  left: 6.5%;
  right: auto;
  bottom: 12%;
  max-width: 58%;
  font-size: clamp(12px, 3.2cqw, 14px);
}
.family-back-character {
  position: absolute;
  z-index: 1;
  width: 46%;
  height: auto;
  right: -1.5%;
  bottom: -4%;
  pointer-events: none;
}
.family-status { color: #f1eee5; font-size: 12px; }
/* Keep both hands inside the frame on the complete-arm illustrations. */
.family-sample:not([data-site='ai']) .family-back-character {
  right: 0;
  bottom: 0;
}
/* Owner-approved Wiki back uses a half-body crop of the standing book portrait. */
.family-sample[data-site='wiki'] .family-back-character { width: 70%; bottom: -44%; right: -6%; }
html[data-portal-family] .family-sample[data-site='wiki'] .tile-reveal { background: repeating-conic-gradient(#dedede 0 25%, #f7f7f7 0 50%) 0 0 / 24px 24px !important; color: #111 !important; border-color: transparent; --signal-ink: #111; }
html[data-portal-family] .family-sample[data-site='wiki'] .tile-reveal strong,
html[data-portal-family] .family-sample[data-site='wiki'] .family-action { color: #111 !important; }

@media (max-width: 960px) {
  html[data-portal-family] .signal-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 560px) {
  html[data-portal-family] .signal-board { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .family-status { font-size: 11px; }
}

/* Owner-selected A: quiet split hero with a subdued 365 watermark.
   Scoped to the family preview. Card layout, artwork and interaction stay in their accepted files. */
html[data-portal-family] .hero {
  grid-template-columns: minmax(0, 44fr) minmax(0, 52fr);
  min-width: 0;
  min-height: 0;
  gap: 40px;
  margin-top: 16px;
  border: 0;
  box-shadow: none;
}
html[data-portal-family] .hero::before { display: none; }
html[data-portal-family] .hero-copy {
  padding: 28px 16px 32px;
  justify-content: center;
  align-items: flex-start;
  background: transparent;
  overflow: clip;
}
html[data-portal-family] .portal-watermark {
  left: -.12em;
  top: 48%;
  color: #141414;
  font-size: clamp(380px, 49vw, 680px);
  transform: translateY(-43%) rotate(-8deg);
}
html[data-portal-family] #portal-title {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  gap: 16px;
}
html[data-portal-family] .portal-find {
  font-size: clamp(164px, 17.7vw, 248px);
  line-height: .82;
  transform: none;
}
html[data-portal-family] .portal-promise {
  margin-left: 0;
  max-width: 100%;
  font-size: clamp(26px, 3.1vw, 44px);
  line-height: 1.16;
  letter-spacing: -.06em;
  text-wrap: balance;
}
html[data-portal-family][lang='en'] .portal-promise,
html[data-portal-family][lang='es'] .portal-promise,
html[data-portal-family][lang='pt-BR'] .portal-promise,
html[data-portal-family][lang='de'] .portal-promise,
html[data-portal-family][lang='fr'] .portal-promise {
  font-size: clamp(26px, 2.7vw, 38px);
  letter-spacing: -.035em;
}
html[data-portal-family] .hero-copy .board-trigger {
  position: relative;
  right: auto;
  bottom: auto;
  margin-top: 32px;
  height: 46px;
  padding: 0 20px;
  gap: 14px;
}
html[data-portal-family] .hero-copy .board-trigger span { font-size: 15px; }
html[data-portal-family] .habitat {
  --life-top-rail: 0%;
  --life-bottom-rail: 64px;
  aspect-ratio: auto;
  height: auto;
  border: 0;
  background: transparent;
}
html[data-portal-family] .habitat > [data-life-image] {
  position: relative;
  display: block;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}
html[data-portal-family] .photo-meta { display: none; }
html[data-portal-family] .life-loading {
  position: absolute; inset: 0 0 auto; width: 100%; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center; gap: 7px; pointer-events: none;
}
html[data-portal-family] .life-loading[hidden] { display: none; }
html[data-portal-family] .life-loading span { width: 5px; height: 5px; background: #aaa8a2; border-radius: 50%; animation: life-loading-dot 1.2s ease-in-out infinite; }
html[data-portal-family] .life-loading span:nth-child(2) { animation-delay: .15s; }
html[data-portal-family] .life-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes life-loading-dot { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html[data-portal-family] .life-loading span { animation: none; opacity: .6; } }
html[data-portal-family] .life-panorama {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  opacity: 0;
  transition: opacity .9s ease;
}
html[data-portal-family] .life-panorama.is-ready { opacity: 1; }
html[data-portal-family] .life-panorama canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
html[data-portal-family] .life-panorama canvas:active { cursor: grabbing; }
html[data-portal-family] .life-panorama canvas:focus-visible { outline: 2px solid #f2f1ec; outline-offset: -3px; }
html[data-portal-family] .has-life-panorama > [data-life-image] { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html[data-portal-family] .life-panorama { transition: none; } }
html[data-portal-family] .photo-caption {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  min-height: var(--life-bottom-rail);
  height: auto;
  padding: 14px 12px;
  background: transparent !important;
}
html[data-portal-family] .photo-caption-copy { max-width: calc(100% - 70px); }
html[data-portal-family] .photo-caption-copy > * { white-space: normal; }
html[data-portal-family] .photo-caption .photo-subject { line-height: 1.3; }
html[data-portal-family] .photo-object { line-height: 1.35; }
/* One paragraph, anchored to the former second line. Extra lines grow upward. */
html[data-portal-family] .photo-caption {
  height: 68px;
  min-height: 68px;
  align-content: end;
}
html[data-portal-family] .photo-caption-copy--combined {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: right;
  color: #aaa8a2;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-portal-family] .photo-caption .photo-caption-copy--combined > * {
  display: inline;
  color: inherit !important;
  font: inherit;
  letter-spacing: inherit;
  white-space: normal;
  transform: none;
}
@media (max-width: 960px) {
  html[data-portal-family] .hero { gap: 24px; }
  html[data-portal-family] .hero-copy { padding: 18px 8px 24px; }
  html[data-portal-family] .portal-find { font-size: clamp(112px, 15.5vw, 160px); }
  html[data-portal-family] .portal-promise { font-size: clamp(22px, 3.05vw, 30px); }
  html[data-portal-family] #portal-title { gap: 22px; }
  html[data-portal-family] .hero-copy .board-trigger { margin-top: 24px; }
}
@media (max-width: 700px) {
  html[data-portal-family] .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 0; }
  html[data-portal-family] .hero-copy { min-height: 296px; padding: 24px 12px 28px; }
  html[data-portal-family] .portal-find { font-size: clamp(128px, 28vw, 174px); }
  html[data-portal-family] .portal-promise { font-size: clamp(24px, 5.5vw, 32px); }
  html[data-portal-family] .portal-watermark { font-size: 470px; }
}

/* The logo keeps its approved appearance; its full brand name is real HTML. */
.portal-brand-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.portal-find::before{content:"FIN"}

/* Localized semantic groups wrap naturally without breaking Korean words. */
html[data-portal-family]:is([lang=ja],[lang=ko]) .family-back-sample .tile-reveal strong{font-size:clamp(18px,6.8cqw,29px)!important}
html[data-portal-family][lang=ko] .family-back-sample .tile-reveal strong{word-break:keep-all}

/* Owner-approved black-base brand reveal, enabled after the DOM is ready. */
.family-brand-fill{display:none;position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--signal-color);clip-path:circle(0px at var(--spread-x,50%) var(--spread-y,50%));transition:clip-path .64s cubic-bezier(.4,0,.2,1);will-change:clip-path}
html[data-portal-family] .family-sample.has-brand-spread .tile-reveal{background:#101010!important;border-color:transparent!important}
.family-ink-fill{display:none;position:absolute;inset:0;z-index:3;padding:6.5%;pointer-events:none;clip-path:circle(0px at var(--spread-x,50%) var(--spread-y,50%));transition:clip-path .64s cubic-bezier(.4,0,.2,1);will-change:clip-path}
html[data-portal-family] .has-brand-spread .family-ink-fill{display:block}
html[data-portal-family] .family-sample.has-brand-spread .tile-reveal>strong,html[data-portal-family] .family-sample.has-brand-spread .tile-reveal>.family-action{color:#f3f0e8!important}
html[data-portal-family] .family-sample.has-brand-spread .family-ink-fill>strong,html[data-portal-family] .family-sample.has-brand-spread .family-ink-fill>.family-action{color:var(--family-final-ink)!important}
html[data-portal-family] .signal-tile.has-brand-spread.is-flipped .family-ink-fill{clip-path:circle(var(--spread-radius,600px) at var(--spread-x,50%) var(--spread-y,50%))}
html[data-portal-family] .has-brand-spread .family-brand-fill{display:block}
html[data-portal-family] .family-sample.has-brand-spread[data-site='wiki'] .family-brand-fill{background:repeating-conic-gradient(#dedede 0 25%,#f7f7f7 0 50%) 0 0/24px 24px}
html[data-portal-family] .signal-tile.has-brand-spread.is-flipped .family-brand-fill{clip-path:circle(var(--spread-radius,600px) at var(--spread-x,50%) var(--spread-y,50%))}
html[data-portal-family] .signal-tile.has-brand-spread .tile-flap{transition:transform .64s cubic-bezier(.22,.68,.24,1)!important}
@media(prefers-reduced-motion:reduce){html[data-portal-family] .signal-tile.has-brand-spread .tile-flap,html[data-portal-family] .has-brand-spread .family-brand-fill,html[data-portal-family] .has-brand-spread .family-ink-fill{transition:none!important}html[data-portal-family] .has-brand-spread .family-brand-fill,html[data-portal-family] .has-brand-spread .family-ink-fill{clip-path:none}}