/* Three tactile scenes, built from HTML so they stay crisp at every size. */
.formats-v2 .section-heading {margin-bottom:27px}
.formats-v2 .muted-heading {color:#2c7cc6}
.formats-motion-bar {display:flex;justify-content:flex-end;min-height:32px;margin:0 0 14px}
.formats-pause {display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;padding:6px 0 6px 12px;color:#72839e;font:inherit;font-size:10px;cursor:pointer}
.formats-pause[hidden] {display:none}
.formats-pause:hover {color:#1c61d8}
.formats-pause svg {width:15px;height:15px}
.formats-v2 .formats-grid {gap:22px;align-items:stretch}
.formats-v2 .format-card {--format-color:#2c70d7;--format-pale:#eaf2ff;min-width:0;padding:0;border:1px solid #dce6f3;border-radius:26px;background:#fff;overflow:hidden;box-shadow:0 8px 28px #17376306;transition:border-color .3s,box-shadow .3s}
.formats-v2 .format-card:hover {border-color:#b6cce9;box-shadow:0 18px 40px #1737630d}
.formats-v2 .format-schedule {--format-color:#b58720;--format-pale:#fff5d9}
.formats-v2 .format-team {--format-color:#438271;--format-pale:#eaf4ee}
.format-card-heading {display:flex;align-items:center;gap:10px;padding:20px 22px 17px}
.format-number {display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:9px;background:var(--format-pale);color:var(--format-color);font-size:10px;font-weight:800}
.format-card-heading p {font-size:11px;font-weight:800;letter-spacing:-.15px}
.format-card-heading>svg {margin-left:auto;width:18px;height:18px;flex-shrink:0;color:var(--format-color);opacity:.75}
.format-scene {position:relative;isolation:isolate;flex-shrink:0;height:254px;margin:0 10px;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 60% 15%,#fff9,transparent 65%),var(--format-pale)}
.format-scene-grid {position:absolute;inset:0;z-index:-1;opacity:.5;background-image:radial-gradient(#54739b35 .7px,transparent .9px);background-size:19px 19px;-webkit-mask-image:radial-gradient(ellipse,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse,#000 10%,transparent 72%)}
.format-scene-ring {position:absolute;left:50%;top:43%;width:193px;height:193px;border:1px solid #6a8ebc19;border-radius:50%;transform:translate(-50%,-50%)}
.format-scene-ring:after {content:'';position:absolute;inset:-27px;border:1px solid #6a8ebc0b;border-radius:50%}
.format-scene-caption {position:absolute;z-index:3;left:20px;bottom:19px;display:flex;align-items:center;gap:20px;font-size:9px;font-weight:700;letter-spacing:.1px;padding:8px 11px;border:1px solid #fff;border-radius:9px;background:#ffffffba;color:#395678;box-shadow:0 4px 10px #25436b04}
.scene-small-dot {position:absolute;right:24px;bottom:30px;width:6px;height:6px;background:var(--format-color);border-radius:50%;box-shadow:0 0 0 5px #ffffff70}
.format-card-copy {padding:25px 24px 22px;flex:1}
.formats-v2 .format-card h3 {font-size:clamp(21px,1.7vw,25px);letter-spacing:-.8px;line-height:1.27;max-width:280px}
.format-card-copy>p {font-size:12px;line-height:1.85;color:#72829a;margin-top:14px;max-width:310px}
.format-card-footer {display:flex;align-items:center;gap:8px;margin:0 24px;padding:17px 0 20px;border-top:1px solid #edf1f7;font-size:9px;color:#60748e;line-height:1.5}
.format-card-footer>span {width:5px;height:5px;border-radius:50%;background:var(--format-color);flex-shrink:0}
.format-card-footer>svg {margin-left:auto;width:16px;height:16px;color:var(--format-color);flex-shrink:0}
/* Project board. Placement shells and animated surfaces are independent. */
.project-sheet-shell {position:absolute;left:47%;top:45%;transform:translate(-50%,-50%)}
.project-sheet {width:190px;height:141px;border:1px solid #b7cff2;border-radius:13px;background:#fff;box-shadow:1px 5px 0 #bed2ef,3px 14px 27px #305d9a20;transform:rotate(-7deg)}
.project-sheet-bar {height:24px;border-bottom:1px solid #e8effa;display:flex;align-items:center;gap:4px;padding:0 11px}
.project-sheet-bar i {width:4px;height:4px;border-radius:50%;background:#bfd1ea}.project-sheet-bar i:first-child {background:#8eb4ea}
.project-sheet-bar>span {margin-left:auto;width:26px;height:4px;border-radius:3px;background:#e6edf8}
.project-sheet-title {width:72px;height:5px;margin:13px 12px 10px;border-radius:3px;background:#356bd0}
.project-columns {display:flex;gap:7px;margin:0 12px}
.project-columns>div {width:33.333%;height:52px;border-radius:5px;padding:6px;background:#f0f5fd}
.project-columns i {display:block;width:17px;height:3px;border-radius:3px;background:#b5cae7;margin-bottom:6px}
.project-columns span {display:block;height:11px;border-radius:3px;margin-bottom:4px;background:#fff;box-shadow:0 1px 3px #294c790d}
.project-columns>div:nth-child(2)>span {height:23px;background:#dceaff}
.project-columns>div:last-child {background:#fdf5d8}
.project-columns .project-done {display:grid;place-items:center;height:25px;background:#ffdf68;color:#3e5980}
.project-done svg {width:17px;height:17px}
.project-meter {position:absolute;left:12px;right:12px;bottom:12px;height:4px;border-radius:4px;background:#edf3fb;overflow:hidden}
.project-meter-fill {display:block;height:100%;background:#4d8de9;border-radius:4px;transform:scaleX(.67);transform-origin:left}
.project-task-shell {position:absolute;top:30px;right:10%}
.project-task {display:grid;grid-template-columns:23px 42px;column-gap:8px;align-items:center;padding:10px;border-radius:11px;background:#fff;box-shadow:0 7px 20px #28528c1a;transform:rotate(6deg)}
.project-task>span {grid-row:1/3;display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#eaf3ff;color:#3981e9}
.project-task svg {width:14px;height:14px}.project-task>i {height:4px;border-radius:3px;background:#d4e3f7}.project-task>i:last-child {width:28px;background:#edf3fb}
.project-arrow-shell {position:absolute;left:70%;top:53%}
.project-arrow {display:grid;place-items:center;width:51px;height:51px;border-radius:16px;background:linear-gradient(140deg,#ffe78b,#ffd23b);color:#2154a2;box-shadow:0 4px 0 #e3ba39,0 9px 16px #a1791520;transform:rotate(9deg)}
.project-arrow svg {width:28px;height:28px;transform:rotate(-45deg)}
/* Ceramic clock with two independent hands. */
.schedule-clock-shell {position:absolute;left:52%;top:44%;transform:translate(-50%,-50%)}
.schedule-clock {width:149px;height:149px;position:relative;border:10px solid #fff;border-radius:50%;background:radial-gradient(circle at 38% 28%,#fff,#fff9e8);box-shadow:0 6px 0 #e4d09a,0 13px 23px #b19b5529,inset 0 0 0 1px #e9debb;transform:rotate(-7deg)}
.schedule-clock:before {content:'';position:absolute;inset:9px;border:2px dotted #b7a5696b;border-radius:50%}
.clock-marker {position:absolute;color:#aa975e;font-size:9px;font-weight:800;line-height:1}
.marker-12 {top:15px;left:50%;transform:translateX(-50%)}.marker-3 {right:16px;top:50%;transform:translateY(-50%)}.marker-6 {bottom:14px;left:50%;transform:translateX(-50%)}.marker-9 {left:16px;top:50%;transform:translateY(-50%)}
.clock-hand {position:absolute;bottom:50%;left:calc(50% - 2px);width:4px;border-radius:4px;transform-origin:50% 100%;background:#1e3b67}
.clock-hour {height:30px;transform:rotate(305deg)}.clock-minute {height:42px;background:#2876d6;transform:rotate(32deg);width:3px;left:calc(50% - 1.5px)}
.clock-pin {position:absolute;top:calc(50% - 5px);left:calc(50% - 5px);width:10px;height:10px;border:3px solid #fff0c3;background:#173761;border-radius:50%;box-shadow:0 1px 4px #846a2a20}
.schedule-calendar-shell {position:absolute;left:13%;top:22%}
.schedule-calendar {width:61px;height:70px;border-radius:12px;background:#fff;box-shadow:0 5px 14px #8a78441a;overflow:hidden;transform:rotate(-13deg)}
.schedule-calendar>span {display:block;height:17px;background:#f6d473;border-bottom:1px solid #e6c66c}
.schedule-calendar>div {display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:10px}.schedule-calendar i {height:6px;border-radius:2px;background:#e9e5da}.schedule-calendar i:nth-child(5) {background:#397bd7;box-shadow:0 0 0 3px #397bd710}
.schedule-check-shell {position:absolute;left:72%;top:57%}
.schedule-check {display:grid;place-items:center;width:40px;height:40px;border:4px solid #fff;border-radius:14px;background:#2a6bd4;color:#fff;box-shadow:0 6px 18px #3664ab26;transform:rotate(11deg)}
.schedule-check svg {width:22px;height:22px}
/* Team: separate avatars, one connected group. */
.team-connection {position:absolute;left:50%;top:44%;width:200px;height:100px;border:1px dashed #8db4a6;opacity:.55;border-radius:50%;transform:translate(-50%,-50%) rotate(-12deg)}
.team-person-shell {position:absolute;transform:translate(-50%,-50%)}
.team-person-left {left:24%;top:43%;z-index:1}.team-person-right {left:76%;top:37%;z-index:1}.team-person-center {left:50%;top:47%;z-index:2}
.team-person {position:relative;display:grid;place-items:center;width:64px;height:70px;border-radius:23px;background:linear-gradient(145deg,#daeade,#b9d5c3);border:3px solid #f5fbf6;color:#618871;font-size:25px;font-weight:800;box-shadow:0 5px 0 #abc6b4,0 12px 22px #486b5620;transform:rotate(-9deg)}
.team-person-right .team-person {background:linear-gradient(145deg,#fff0b9,#f5d573);color:#a18436;box-shadow:0 5px 0 #d5be7b,0 12px 22px #6b624520;transform:rotate(10deg)}
.team-person-center .team-person {width:88px;height:96px;border-radius:29px;background:linear-gradient(140deg,#397ce0,#2054a3);border:4px solid #f5fbf6;color:white;font-size:23px;box-shadow:0 5px 0 #9dbbca,0 13px 28px #285b752b;transform:rotate(-3deg)}
.team-person>span {position:absolute;right:-5px;bottom:0;width:13px;height:13px;border:3px solid #f5fbf6;border-radius:50%;background:#55a27d}
.team-person-center .team-person>span {right:-9px;bottom:-2px;width:29px;height:29px;display:grid;place-items:center;border:3px solid #fff;border-radius:11px;background:#ffdb59;color:#2558a0}
.team-person-center svg {width:17px;height:17px}
.team-message-shell {position:absolute;left:43%;top:17%;z-index:3}
.team-message {position:relative;display:flex;align-items:center;justify-content:center;gap:5px;width:59px;height:32px;border-radius:12px 12px 12px 3px;background:#fff;box-shadow:0 6px 16px #486b5615;transform:rotate(7deg)}
.team-message i {width:5px;height:5px;border-radius:50%;background:#92b7a5}.team-message i:nth-child(2) {background:#5e997e}
@media(min-width:1400px) {.format-scene{height:278px}.formats-v2 .format-card h3{font-size:26px}.format-card-copy>p{font-size:13px}}
@media(max-width:1100px) {
  .formats-v2 .formats-grid{gap:16px}.format-card-heading{padding:17px 16px 14px;gap:8px}.format-card-heading p{font-size:10px}.format-card-heading>svg{width:16px;height:16px}
  .format-card-copy{padding:22px 19px 20px}.formats-v2 .format-card h3{font-size:21px}.format-card-copy>p{font-size:11px}.format-card-footer{margin:0 19px;font-size:8px;gap:6px}
  .format-scene{height:233px;margin:0 8px}.project-sheet{width:160px;height:132px}.project-columns{gap:5px}.project-columns>div{padding:5px}.project-sheet-title{margin-top:11px}.project-sheet-shell{left:45%}
  .schedule-calendar-shell{left:8%}.schedule-clock{width:132px;height:132px;border-width:9px}.clock-hour{height:26px}.clock-minute{height:34px}.schedule-check-shell{left:73%}
  .team-person{width:54px;height:62px;font-size:21px;border-radius:20px}.team-person-center .team-person{width:78px;height:86px;font-size:20px;border-radius:25px}.team-person-left{left:22%}.team-person-right{left:78%}
  .format-scene-caption{left:14px;font-size:8px;padding:7px 9px}.scene-small-dot{right:17px}
}
@media(max-width:800px) and (min-width:681px) {
  .formats-v2 .formats-grid{grid-template-columns:1fr}
  .formats-v2 .format-card{display:grid;grid-template-columns:44% minmax(0,1fr)}
  .format-card-heading{grid-column:1/-1;padding:18px 22px 14px}.format-card-heading p{font-size:12px}
  .format-scene{grid-row:2/4;height:238px;margin:0 0 12px 12px}
  .format-card-copy{padding:15px 25px 20px}.formats-v2 .format-card h3{font-size:25px}.format-card-copy>p{font-size:12px}
  .format-card-footer{margin:0 25px 12px;font-size:9px;align-self:end}
}
@media(max-width:680px) {
  .formats-v2 .section-heading{margin-bottom:13px}.formats-motion-bar{margin-bottom:12px}
  .formats-v2 .formats-grid{grid-template-columns:1fr;gap:22px}
  .formats-v2 .format-card{border-radius:25px;max-width:460px;width:100%;justify-self:center}
  .format-card-heading{padding:19px 22px 16px;gap:10px}.format-card-heading p{font-size:12px}.format-card-heading>svg{width:18px;height:18px}
  .format-scene{height:250px;margin:0 10px}
  .format-card-copy{padding:25px 24px 23px}.formats-v2 .format-card h3{font-size:25px;max-width:300px}.format-card-copy>p{font-size:12px;line-height:1.85;margin-top:13px;max-width:none}
  .format-card-footer{font-size:10px;margin:0 24px;padding:17px 0 21px}
  .project-sheet{width:190px;height:141px}.project-columns{gap:7px}.project-columns>div{padding:6px}.project-sheet-title{margin-top:13px}.project-sheet-shell{left:47%}
  .schedule-clock{width:149px;height:149px;border-width:10px}.clock-hour{height:30px}.clock-minute{height:42px}.schedule-calendar-shell{left:13%}
  .team-person{width:64px;height:70px;font-size:25px;border-radius:23px}.team-person-center .team-person{width:88px;height:96px;font-size:23px;border-radius:29px}.team-person-left{left:24%}.team-person-right{left:76%}
  .format-scene-caption{left:20px;font-size:9px;padding:8px 11px}.scene-small-dot{right:24px}
}
@media(max-width:360px) {
  .format-card-heading{padding:16px 17px 14px}.format-card-heading p{font-size:10px}
  .format-scene{height:232px}.project-sheet{width:167px;height:137px}.project-task-shell{right:7%;top:24px}.project-arrow-shell{left:73%;top:55%}.project-arrow{width:43px;height:43px;border-radius:14px}
  .schedule-calendar-shell{left:8%}.schedule-clock-shell{left:54%}.schedule-clock{width:133px;height:133px}.clock-hour{height:26px}.clock-minute{height:34px}
  .team-person{width:54px;height:62px;font-size:21px;border-radius:20px}.team-person-center .team-person{width:78px;height:86px;font-size:20px;border-radius:25px}.team-person-left{left:22%}.team-person-right{left:78%}
  .format-card-copy{padding:23px 20px}.formats-v2 .format-card h3{font-size:23px}.format-card-copy>p{font-size:11px}.format-card-footer{margin:0 20px;font-size:9px}
}
@media(prefers-reduced-motion:reduce) {.formats-v2 .format-card{transition:none}}