/* Home first screen: the Dots hero and its feed chapter (Home Lab v0.26). Rules are #brand-scoped. */

/* Home first screen: the Dots hero (from Hero Concepts v8). Everything is scoped to #brand, so the rest of the page keeps its own styles */
#brand{--g2:clamp(20px,3vw,44px);position:relative;height:100vh;height:100svh;min-height:700px;overflow:hidden;border-radius:0 0 28px 28px;isolation:isolate;
 color:#F1ECE2;background-color:#0C0B0C;background-image:radial-gradient(64% 56% at 52% 52%,#161416 0%,#0C0B0C 62%,#080708 100%);
 display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"l1 meta" "stage stage" "lede l2" "lede l3";
 column-gap:40px;padding:clamp(84px,10.5vh,108px) var(--g2) clamp(26px,4.2vh,42px)}
#brand::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.3;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
#brand .dots{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}

/* headline split across the frame; the second line names the device on stage */
#brand h1{display:contents;margin:0;font-weight:400}
#brand .l1,#brand .l2{position:relative;z-index:2;display:block;white-space:nowrap;font:400 clamp(60px,min(8.6vw,14vh),148px)/.86 var(--display);letter-spacing:-.062em;
 opacity:0;transform:translateY(.12em);filter:blur(10px);transition:opacity 1.2s ease,transform 1.4s var(--e-out),filter 1.2s var(--e-out)}
#brand .l1{grid-area:l1;align-self:start;margin-left:-.05em}
#brand .l2{grid-area:l2;align-self:end;justify-self:end;transition-delay:.18s;margin-right:-.02em}
#brand.lit .l1,#brand.lit .l2{opacity:1;transform:none;filter:none}
#brand .tdot{display:inline-block;width:.15em;height:.15em;margin-left:.05em;border-radius:50%;background:#FF5A1F;vertical-align:baseline;opacity:0;transform:scale(.3);transition:opacity .6s ease .5s,transform 1s var(--e-out) .5s}
#brand.lit .tdot{opacity:1;transform:none}
#brand .l3{grid-area:l3;position:relative;z-index:2;justify-self:end;margin-top:.5em;font:400 clamp(20px,min(2.2vw,3.6vh),34px)/1 var(--display);letter-spacing:-.03em;color:rgba(241,236,226,.56);white-space:nowrap;opacity:0;transition:opacity 1s ease .4s}
#brand.lit .l3{opacity:1}
#brand .l3 b{display:inline-block;min-width:3.6em;font-weight:inherit;color:#F1ECE2;transition:opacity .26s ease,filter .26s ease,transform .4s var(--e-out)}
#brand .l3 b.out{opacity:0;filter:blur(6px);transform:translateY(.25em)}

#brand .stage{grid-area:stage;position:relative;z-index:1;min-height:0;margin:clamp(6px,1.6vh,18px) 0}
#brand .dv{opacity:0;transform:translateY(14px);filter:blur(6px);transition:opacity .9s var(--e-out),transform 1.1s var(--e-out),filter .9s var(--e-out)}
#brand.done .dv{opacity:1;transform:none;filter:none}

/* copy: the paragraph and buttons bottom left, the small print top right */
#brand .meta{grid-area:meta;position:relative;z-index:2;align-self:start;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:12px;margin:0;padding-top:.6em;text-align:right}
#brand .fine{margin:0;font:400 10.5px/1.4 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#F1ECE2;opacity:.58}
#brand .macl{margin:0;font-size:14px;color:#F1ECE2;text-decoration-color:rgba(241,236,226,.4)}
#brand .lede{grid-area:lede;position:relative;z-index:2;align-self:end;margin-bottom:4px;max-width:560px;padding-top:16px;border-top:1px solid rgba(241,236,226,.16)}
#brand .hp{margin:0;max-width:36ch;font:400 16px/1.5 var(--sans);color:rgba(241,236,226,.64);text-wrap:pretty}
#brand .hp b{color:#F1ECE2}
#brand .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;justify-content:flex-start}
#brand .bx{border-radius:6px;transition:background-color .6s ease,color .6s ease,box-shadow .6s ease,scale .12s}
#brand .btns .bx:not(.glass){background:#F1ECE2;color:var(--ink)}
@media (hover:hover) and (pointer:fine){#brand .btns .bx:not(.glass):hover{background:#fff}}
#brand .bx.glass{background:rgba(241,236,226,.06);color:#F1ECE2;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px rgba(241,236,226,.18)}
@media (hover:hover) and (pointer:fine){#brand .bx.glass:hover{background:rgba(241,236,226,.12)}}
/* the waitlist is a field on the same row, the same height as the button beside it: nothing moves when you use it */
#brand .hwl{position:relative;flex:1 1 300px;max-width:390px;width:auto;margin:0}
#brand .hwl .wl{height:46px;padding:3px;gap:3px;border-radius:8px !important;overflow:visible;background:rgba(241,236,226,.05);box-shadow:inset 0 0 0 1px rgba(241,236,226,.2);transition:box-shadow .3s}
#brand .hwl .wl:focus-within{box-shadow:inset 0 0 0 1px rgba(241,236,226,.55)}
#brand .hwl input{height:100%;padding:0 12px;background:transparent;color:#F1ECE2;font:400 15px var(--sans);box-shadow:none !important}
#brand .hwl input::placeholder{color:rgba(241,236,226,.42)}
#brand .hwl .bx{height:40px;padding:0 16px;border-radius:6px !important;background:#F1ECE2;color:var(--ink);flex:none}
@media (hover:hover) and (pointer:fine){#brand .hwl .bx:hover{background:#fff}}
#brand .hwl .wl-msg{position:absolute;left:2px;top:calc(100% + 8px);margin:0;min-height:0;font:400 12.5px/1.3 var(--sans);color:rgba(241,236,226,.6);white-space:nowrap}
#brand .hwl[data-state="invalid"] .wl-msg,#brand .hwl[data-state="fail"] .wl-msg{color:#FF8A66}
#brand .hwl[data-state="ok"] .wl-msg,#brand .hwl[data-state="dup"] .wl-msg{position:static;display:flex;align-items:center;gap:10px;height:46px;min-height:0;padding:0 14px;border-radius:8px;background:rgba(241,236,226,.06);box-shadow:inset 0 0 0 1px rgba(241,236,226,.2);color:#F1ECE2;font-size:13.5px;white-space:normal;line-height:1.25}
#brand .hwl[data-state="ok"] .wl-msg::before,#brand .hwl[data-state="dup"] .wl-msg::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--org)}

/* the frame: a thin square around the device, with its name, its place in the set, and where Taku is */
#brand .stage{container-type:size}
/* placed by js/dots.js around the dots of the current device, and eased as the device changes shape */
#brand .fr{--ln:rgba(241,236,226,.2);position:absolute;z-index:2;left:30%;top:10%;width:40%;height:80%;
 font:italic 400 10px/1 var(--mono,ui-monospace,"SF Mono",Menlo,monospace);letter-spacing:.04em;color:rgba(241,236,226,.5);pointer-events:none;
 clip-path:inset(0 100% 100% 0);transition:clip-path 1.2s var(--e-io) .15s}
#brand.lit .fr{clip-path:inset(-60px -200px -60px -200px)}
#brand .fl{position:absolute;left:-1px;right:-1px;bottom:calc(100% + 14px);display:flex;justify-content:space-between;font-style:normal;font-size:10px;letter-spacing:.2em;color:rgba(241,236,226,.66)}
#brand .fl span{padding-bottom:6px;border-bottom:1px solid rgba(241,236,226,.4);white-space:pre}
#brand .cn{position:absolute;width:10px;height:10px;border-color:rgba(241,236,226,.55);border-style:solid;border-width:0}
#brand .cn.tl{left:0;top:0;border-top-width:1px;border-left-width:1px}
#brand .cn.tr{right:0;top:0;border-top-width:1px;border-right-width:1px}
#brand .cn.bl{left:0;bottom:0;border-bottom-width:1px;border-left-width:1px}
#brand .cn.br{right:0;bottom:0;border-bottom-width:1px;border-right-width:1px}
#brand .ch{position:absolute;left:50%;top:50%;width:11px;height:11px;transform:translate(-50%,-50%);background:linear-gradient(var(--ln),var(--ln)) center/1px 100% no-repeat,linear-gradient(var(--ln),var(--ln)) center/100% 1px no-repeat}
#brand .sl{position:absolute;top:50%;width:min(64px,8cqw);height:1px;background:var(--ln)}
#brand .sl.l{right:calc(100% + 28px)}#brand .sl.r{left:calc(100% + 28px)}
#brand .fy{position:absolute;left:16px;top:-3px;white-space:pre}
#brand .fx{position:absolute;right:16px;bottom:-3px;white-space:pre}

#brand.nogl .stage{background:url(/taku/a/b4b8b21a5289.webp) center/contain no-repeat}

@media (max-width:1100px){
 #brand{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto auto;grid-template-areas:"l1" "stage" "l2" "l3" "lede" "meta";row-gap:0}
 #brand .l1,#brand .l2{font-size:clamp(48px,11.4vw,96px)}
 #brand .l2{margin-top:6px}
 #brand .l3{justify-self:end;font-size:clamp(18px,4.6vw,30px)}
 #brand .lede{max-width:none;margin-top:22px}
 #brand .lede{max-width:none}
 #brand .meta{justify-self:start;justify-content:flex-start;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 18px;padding-top:18px;text-align:left}
 #brand .stage{margin:10px 0}
}
@media (max-width:640px){
 #brand{min-height:720px;padding:84px 20px 26px}
 #brand .stage{margin:12px -8px}
 #brand .hp{font-size:15.5px}
 #brand .btns{width:100%}
 #brand .btns .bx,#brand .hwl{flex:1 1 100%;max-width:none}
 #brand .hwl .bx{flex:none}
 #brand .sl{display:none}
}
@media (prefers-reduced-motion:reduce){#brand .l1,#brand .l2,#brand .l3,#brand .dv,#brand .tdot,#brand .fr{transition:none}}

/* The feed chapter: a live Taku OS screen inside the dot phone. Sizes are the Figma file's (412 wide), scaled to the dot phone by js/feed.js */
#brand .fclip{position:absolute;z-index:1;left:0;top:0;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;
 -webkit-mask-image:linear-gradient(#000 calc(100% - var(--fb,0px)),transparent);mask-image:linear-gradient(#000 calc(100% - var(--fb,0px)),transparent)}
#brand .fglow{position:absolute;opacity:0;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(150,172,236,.2),rgba(150,172,236,.06) 55%,transparent 72%)}
#brand .fscr{position:absolute;overflow:hidden;background:#86B7E4;isolation:isolate;opacity:0}
/* resolving out of the dot grid: dots grow to cover each cell, and a soft wipe from the top makes the rest solid */
#brand .fmk{--wp:0;
 -webkit-mask-image:linear-gradient(#000 calc(var(--wp)*100% - 35%),transparent calc(var(--wp)*100%)),radial-gradient(circle at center,#000 var(--dr),transparent calc(var(--dr) + .75px));
 -webkit-mask-size:100% 100%,var(--P) var(--P);-webkit-mask-position:0 0,var(--mx) var(--my);-webkit-mask-repeat:no-repeat,repeat;-webkit-mask-composite:source-over;
 mask-image:linear-gradient(#000 calc(var(--wp)*100% - 35%),transparent calc(var(--wp)*100%)),radial-gradient(circle at center,#000 var(--dr),transparent calc(var(--dr) + .75px));
 mask-size:100% 100%,var(--P) var(--P);mask-position:0 0,var(--mx) var(--my);mask-repeat:no-repeat,repeat;mask-composite:add}
#brand .fdes{position:absolute;left:0;top:0;width:412px;height:923px;transform-origin:0 0;font:400 14px/1.42 "Hanken Grotesk",var(--sans);letter-spacing:-.01em;color:rgba(0,0,0,.92);
 -webkit-font-smoothing:antialiased;text-align:left}
#brand .fdes b{font-weight:500}
#brand .fdes small{font-size:inherit}
#brand .fdes .nm{font-family:"Space Grotesk",var(--display);font-weight:400;letter-spacing:-.01em}
#brand .fdes .ic{display:inline-grid;place-items:center;width:16px;height:16px;flex:none;color:rgba(0,0,0,.8)}
#brand .fdes .ic svg{width:100%;height:100%;display:block}

/* status bar, with Taku in the island */
#brand .fsb{position:absolute;left:0;right:0;top:0;height:62px}
#brand .clk{position:absolute;left:30px;top:21px;font:500 16px/1 "Hanken Grotesk";letter-spacing:0;font-variant-numeric:tabular-nums}
#brand .isl{position:absolute;left:50%;top:14px;width:118px;height:34px;margin-left:-59px;border-radius:17px;background:#000}
#brand .isl .eye{position:absolute;top:11px;width:6px;height:12px;border-radius:3px;background:#fff}
#brand .isl .eye:first-child{left:20px}#brand .isl .eye:nth-child(2){left:30px}
#brand .isl .cam{position:absolute;right:12px;top:8px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#2a2c3a 0 22%,#0b0b10 46%,#151620 100%)}
#brand .sys{position:absolute;right:26px;top:20px;display:flex;align-items:flex-end;gap:5px}
#brand .sys i{display:block;background:#1D1B20}
#brand .sys .wf{width:16px;height:12px;clip-path:polygon(50% 100%,0 26%,22% 8%,50% 0,78% 8%,100% 26%)}
#brand .sys .sg{width:13px;height:13px;clip-path:polygon(100% 0,100% 100%,0 100%)}
#brand .sys .bt{width:8px;height:14px;border-radius:2px;background:linear-gradient(rgba(29,27,32,.3) 45%,#1D1B20 45%)}

#brand .fdate{position:absolute;left:16px;right:16px;top:64px;height:40px;display:flex;align-items:center;justify-content:space-between}
#brand .fdate b{font:400 24px/1.05 "Space Grotesk";letter-spacing:-.01em}
#brand .fdate img{width:40px;height:40px;border-radius:50%;display:block;background:#ddd}
#brand .fpills{position:absolute;left:16px;top:120px;display:flex;gap:8px;white-space:nowrap}
#brand .fp{flex:none;display:flex;align-items:center;gap:12px;height:64px;padding:12px;border-radius:999px;background:rgba(255,255,255,.92)}
#brand .fp svg{display:block;fill:#1B1B1B}
#brand .fp .nm{font-size:24px;padding-right:8px}
#brand .fp .slp{font-size:18px;font-weight:400;color:rgba(0,0,0,.8);padding-right:12px}
#brand .fp.mu{padding:12px}
#brand .fp .cover{width:40px;height:40px;border-radius:8px!important;background:radial-gradient(120% 90% at 20% 15%,#FFD9B8 0,#F59A72 38%,#8E7BD8 100%);box-shadow:inset 0 0 0 .6px rgba(0,0,0,.08)}
#brand .fdes .fcol{display:flex;flex-direction:column;min-width:0}
#brand .fp .fcol b{font-size:16px;line-height:1.5}
#brand .fp .fcol small{font-size:12px;line-height:1.3;color:rgba(0,0,0,.8)}
#brand .fp .pl{width:40px;height:40px;border-radius:50%;background:#1b1b1b;display:grid;place-items:center;margin-left:6px}
#brand .fp .pl svg{width:16px;height:16px}

/* the feed */
#brand .ffeed{position:absolute;left:16px;top:0;width:380px}
#brand .fi{position:absolute;left:0;top:0;width:380px;visibility:hidden}
#brand .fc{display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:24px;background:rgba(255,255,255,.92)}
#brand .fh{display:flex;justify-content:space-between;align-items:center;font-size:14px;line-height:20px;color:rgba(0,0,0,.8)}
#brand .fh>span{display:inline-flex;align-items:center;gap:5px}
#brand .fpn{position:relative;overflow:hidden;border-radius:12px;background:rgba(0,0,0,.06)}
#brand .fpn.map{height:112px;background:#E8EAEE}
#brand .fpn.map svg{position:absolute;inset:0;width:100%;height:100%}
#brand .eta{position:absolute;left:10px;top:44px;display:flex;flex-direction:column;align-items:center;padding:4px 8px 5px;background:#1b1b1b;color:#fff;font:500 10px/1 "Hanken Grotesk";letter-spacing:.06em;text-transform:uppercase}
#brand .eta b{font:500 16px/1.1 "Space Grotesk";letter-spacing:0}
#brand .frow{display:flex;align-items:center;gap:12px}
#brand .frow.top{align-items:stretch}
#brand .carimg{width:64px;height:auto;display:block;margin:-4px 0}
#brand .frow .fcol b{font-size:18px;line-height:1.35}
#brand .frow .fcol small{font-size:14px;color:rgba(0,0,0,.64)}
#brand .frow .fcol.r{margin-left:auto;align-items:flex-end}
#brand .frow .fcol .nm{font-size:20px;font-weight:400}
#brand .fpn.img{flex:none;width:150px;height:150px;display:grid;place-items:center}
#brand .fpn.img img{width:112px;height:auto;display:block}
#brand .fdes .grow{flex:1;gap:8px}
#brand .tt{font-size:18px!important;line-height:1.3}
#brand .chips{display:flex;gap:4px}
#brand .chips i,#brand .fseg i,#brand .gp i{font-style:normal}
#brand .chips i{font-size:12px;line-height:1.4;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.06);color:rgba(0,0,0,.8)}
#brand .fseg{display:flex;height:36px;padding:3px;margin-top:4px;border-radius:999px;background:rgba(0,0,0,.06)}
#brand .fseg i{flex:1;display:grid;place-items:center;border-radius:999px;font-size:13px;color:rgba(0,0,0,.8)}
#brand .fseg i.on{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
#brand .nm.big{margin-top:auto;font-size:26px!important;line-height:1}
#brand .fbs{display:flex;gap:8px}
#brand .fbt{flex:1;height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;background:rgba(0,0,0,.08);color:#1b1b1b;font-size:16px;line-height:1}
#brand .fbt.pri{background:#1b1b1b;color:#fff}
#brand .fbt .spk{width:16px;height:16px;fill:#fff}
#brand .fbt.s{flex:none;height:32px;font-size:14px;width:100%}
#brand .fpn.msg{padding:8px 12px 12px}
#brand .rel{display:inline-flex;align-items:center;gap:4px;padding:1px 6px 1px 5px;border-radius:4px;font-size:12px;line-height:18px;color:rgba(0,0,0,.8);
 background:linear-gradient(90deg,rgba(255,170,130,.32),rgba(255,214,170,.22))}
#brand .rel .spk{width:9px;height:9px;fill:#1b1b1b}
#brand .who{display:flex;align-items:center;gap:6px;margin-top:8px}
#brand .who .av{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;margin-right:2px;font:600 15px/1 "Hanken Grotesk";font-style:normal;color:#6B4A35;background:#ECD8C6}
#brand .who b{font-size:16px}
#brand .who small{font-size:14px;color:rgba(0,0,0,.64)}
#brand .who .chn{margin-left:auto}
#brand .fpn.msg p{margin:6px 0 0;font-size:14px;line-height:1.42;color:rgba(0,0,0,.8)}
#brand .pg{display:flex;justify-content:center;gap:4px;margin-top:-4px}
#brand .pg i{width:6px;height:6px;border-radius:3px;background:rgba(0,0,0,.12)}
#brand .pg i.on{width:12px;background:#1b1b1b}
#brand .fsl{display:flex;align-items:center;height:64px;padding:4px;border-radius:999px;background:rgba(255,255,255,.48)}
#brand .fsl .kn{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
#brand .fsl .kn .ic{width:24px;height:24px;color:#1b1b1b}
#brand .fsl .tx{flex:1;text-align:center;font-size:16px;color:rgba(0,0,0,.64);padding-left:20px}
#brand .fsl .cv{display:flex;padding-right:14px}
#brand .fsl .cv .ic{margin-left:-7px;color:#1b1b1b}
#brand .fsl .cv .ic:nth-child(2){opacity:.36}#brand .fsl .cv .ic:nth-child(3){opacity:.14}
#brand .fduo{display:flex;gap:12px}
#brand .fc.sm{flex:1;min-width:0;height:180px}
#brand .fc.sm .nm{font-size:20px;line-height:20px;color:rgba(0,0,0,.92)}
#brand .chk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
#brand .chk li{display:flex;justify-content:space-between;align-items:center;font-size:14px;line-height:18px;color:rgba(0,0,0,.88)}
#brand .chk li i{width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.42)}
#brand .bar{height:6px;margin-top:auto;border-radius:3px;background:rgba(0,0,0,.06)}
#brand .bar i{display:block;width:33%;height:100%;border-radius:3px;background:#64CE74}
#brand .gauge{position:relative;height:84px}
#brand .gauge svg{display:block;width:132px;margin:2px auto 0}
#brand .gauge .nm{position:absolute;left:0;right:0;top:30px;text-align:center;font-size:30px!important;line-height:1}
#brand .gauge .nm small{font-size:14px}
#brand .gauge span{position:absolute;left:0;right:0;top:62px;display:flex;justify-content:center;align-items:center;gap:2px;font-size:12px;color:rgba(0,0,0,.64)}
#brand .gauge span .ic{width:11px;height:11px}

/* Taku's greeting opens out of the island */
#brand .fgr{position:absolute;left:8px;top:8px;width:396px;border-radius:40px;background:#0B0B0D;color:#fff;visibility:hidden}
#brand .gin{padding:16px 16px 16px}
#brand .gin .eyes{display:flex;gap:4px;margin:8px 0 12px 8px}
#brand .gin .eyes i{width:6px;height:12px;border-radius:3px;background:#fff}
#brand .gin p{margin:0 0 0 2px;font-size:18px;line-height:1.55;color:rgba(255,255,255,.8)}
#brand .gp{display:flex;gap:8px;margin-top:14px;overflow:hidden;white-space:nowrap;border-radius:0 999px 999px 0}
#brand .gp i{flex:none;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-size:16px;line-height:1.5;font-weight:500;color:rgba(255,255,255,.92)}
#brand .fhome{position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:rgba(0,0,0,.8)}

/* what each app noticed, beside it */
#brand .ftags{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden}
#brand .ftag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;white-space:nowrap;
 font:italic 400 10px/1 var(--mono,ui-monospace,"SF Mono",Menlo,monospace);letter-spacing:.04em;color:rgba(241,236,226,.56)}
#brand .ftag b{font-style:normal;font-weight:400;letter-spacing:.16em;color:rgba(241,236,226,.92)}
#brand.feeding .fr .ch,#brand.feeding .fr .sl{opacity:0}
#brand .fr .ch,#brand .fr .sl{transition:opacity .4s}
@media (max-width:640px){#brand .ftags,#brand .fl{display:none}}