/* Workflow rows for section 4. Built by outputs/website-design/2026-11-04-comparing-quotes-row/build_rows.py; edit there. */
#example .wf-rows{display:grid;gap:clamp(20px,2.4vw,32px)}
#example .wf-caption{margin:16px 0 0;font-size:14px;color:var(--text-2)}
/* The split head, eyebrow, heading and lead come from the page rhythm in sections/shell.css. */
/* The row */
.wf-row,.wf-row *{box-sizing:border-box}
.wf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:20px;background:var(--row);border:1px solid var(--hair);border-radius:24px}
.wf-copy{display:flex;flex-direction:column;justify-content:center;gap:clamp(32px,4vw,52px);padding:0 28px;min-width:0}
@media (min-width:901px){.wf-copy{justify-content:space-between;padding:32px 28px 28px}}
@media (min-width:901px) and (max-width:1279px){.wf-copy{gap:24px;padding:16px 24px}}
.wf-top{display:grid;gap:20px}
.wf-icon{width:24px;height:24px;color:var(--text-2)}
.wf-top h3{margin:0;font-size:28px;line-height:1.2;letter-spacing:-.03em;font-weight:450;text-wrap:balance}
.wf-top p{margin:0;color:var(--text-2);line-height:1.55;max-width:48ch}
.wf-team{padding:20px;border-radius:12px;background:var(--box)}
.wf-team h4{margin:0 0 6px;font-size:16px;font-weight:500;letter-spacing:-.01em}
.wf-team p{margin:0;color:var(--text-2);line-height:1.5}

/* The picture: every size is in em, and one em is a sixty-fourth of the panel */
.cq{container:cq/inline-size;min-width:0;margin:0}
.cq-stage{position:relative;overflow:hidden;font-family:var(--font);color:var(--ink);background:var(--panel);
  font-size:calc(100cqw / 64);height:46.6em;border-radius:18px;
  --win-w:22.8em;--x1:6.2em;--x2:35em;--win-top:9.4em;--win-h:29.8em;--st-top:6.7em;--seg-w:25em;--seg-h:4.2em;--seg-top:2em;--note-w:32em;--note-bottom:1.6em}
.cq-pause{font:inherit;position:absolute;top:calc(var(--seg-top) + (var(--seg-h) - 3em) / 2);right:2em;width:3em;height:3em;min-width:24px;min-height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-2);cursor:pointer;transition:background-color 160ms,color 160ms,opacity 200ms}
.cq-pause{opacity:0}
.cq-pause[hidden]{display:none}
.cq-stage:hover .cq-pause,.cq-pause:focus-visible{opacity:1}
@media (hover:none){.cq-pause:not(:focus-visible){visibility:hidden}}
.cq-pause:hover{background:rgba(17,20,24,.07);color:var(--ink)}
.cq-pause svg{width:max(1.5em,13px);height:max(1.5em,13px)}
.cq-pause .play{display:none}
.cq-pause[data-paused="true"] .play{display:block}
.cq-pause[data-paused="true"] .pause{display:none}

.seg{position:absolute;top:var(--seg-top);left:50%;width:var(--seg-w);height:var(--seg-h);transform:translateX(-50%);display:grid;grid-template-columns:1fr 1fr;padding:.42em;background:var(--seg);border-radius:1.2em}
.seg-pill{position:absolute;top:.42em;bottom:.42em;left:.42em;width:calc(50% - .42em);background:#fff;border-radius:.86em;box-shadow:0 .08em .24em rgba(17,20,24,.16),0 0 0 1px rgba(17,20,24,.04);transition:transform 440ms var(--ease)}
.cq-stage[data-state="diff"] .seg-pill{transform:translateX(100%)}
.seg button{position:relative;appearance:none;margin:0;padding:0;background:none;border:0;border-radius:.86em;font:500 max(1.42em,11px)/1 var(--font);letter-spacing:-.01em;color:var(--ink-2);cursor:pointer;transition:color 240ms,transform 110ms ease-out}
.seg button::after{content:"";position:absolute;inset:-.5em 0}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg button:active{transform:scale(.97)}
.seg button:focus-visible,.cq-pause:focus-visible{outline:2px solid var(--violet-ink);outline-offset:2px}

.st{position:absolute;top:var(--st-top);width:var(--win-w);height:2.6em;display:grid;place-items:center}
.st-l{left:var(--x1)}.st-r{left:var(--x2)}
.st>span{grid-area:1/1;display:inline-flex;align-items:center;gap:.42em;font-size:max(1.44em,12px);font-weight:500;letter-spacing:-.012em;line-height:1;transition:opacity 280ms ease,transform 420ms var(--ease)}
.st .d{opacity:0;transform:translateY(.28em)}
.cq-stage[data-state="diff"] .st .m{opacity:0;transform:translateY(-.28em)}
.cq-stage[data-state="diff"] .st .d{opacity:1;transform:none}
.mk{flex:none;width:1.04em;height:1.04em;border-radius:50%;display:grid;place-items:center;color:#fff}
.mk svg{width:.64em;height:.64em}
.mk.ok{background:var(--ok)}.mk.df{background:var(--violet-ink)}
.st .mk{width:1.23em;height:1.23em}
.st .mk svg{width:.72em;height:.72em}

.win{position:absolute;top:var(--win-top);width:var(--win-w);height:var(--win-h);z-index:1;display:flex;flex-direction:column;padding:0 .42em .42em;background:#000;border-radius:1.3em;box-shadow:0 2.6em 4.6em -1.8em rgba(17,20,24,.34),0 .5em 1.4em -.5em rgba(17,20,24,.16)}
.win-a{left:var(--x1)}.win-b{left:var(--x2)}
.bar{flex:none;height:2.75em;display:flex;align-items:center;gap:.42em;padding:0 .5em;color:#fff}
.bar .nm{display:flex;align-items:center;gap:.3em;font-size:.94em;font-weight:500;letter-spacing:-.005em;white-space:nowrap}
.bar .nm svg{width:1.08em;height:1.08em;color:var(--violet-bright)}
.vp{position:relative;flex:1;min-height:0;overflow:hidden;background:#fff;border-radius:.82em}
.sheet{position:absolute;top:0;left:0;right:0;font-size:.76em;line-height:1.28;color:#1b1e24;padding:1.5em 1.4em 3em;transform:translate3d(0,var(--y,0),0);transition:transform 760ms var(--ease);will-change:transform}
.bl{filter:blur(.23em);transition:filter 380ms ease}
.a-head.bl,.b-head.bl{filter:blur(.1em)}
.bl.lit{filter:none}
.rw{display:flex;justify-content:space-between;align-items:center;gap:.8em;padding:.34em .45em;transition:filter 380ms ease,background-color 320ms ease}
.rw .v{padding:.06em .32em;margin-right:-.32em;border-radius:.22em;white-space:nowrap;transition:background-color 320ms ease,box-shadow 320ms ease}
.rw.lit .v{font-weight:600;color:var(--ink);background:rgba(139,92,246,.18);box-shadow:inset 0 0 0 1px rgba(124,58,237,.6)}
.sheet p{margin:0}
/* Insurer A: a plain sans form with grey bands */
.sheet-a{font-family:Arial,Helvetica,sans-serif}
.a-head{display:grid;gap:.5em;margin-bottom:1.5em}
.a-head strong{font-size:1.72em;line-height:1.14;font-weight:700;letter-spacing:-.01em}
.a-head small{font-size:.86em;justify-self:end;color:#555}
.sheet-a .t{margin-bottom:1em}
.sheet-a .band{padding:.42em .5em;background:var(--band);font-weight:700;font-size:.92em}
.sheet-a .rw{border-bottom:1px solid var(--doc-line)}
.sheet-a .para{margin:0 0 1em;font-size:.88em;color:#555}
/* Insurer B: a bordered serif schedule, in a different order */
.sheet-b{font-family:"Times New Roman",Times,serif;font-size:.8em}
.b-head{display:flex;justify-content:space-between;gap:1em;align-items:flex-start;padding-bottom:.8em;margin-bottom:1em;border-bottom:1px solid rgba(17,20,24,.28)}
.b-head i{flex:none;width:4.2em;height:2.6em;border:1px solid rgba(17,20,24,.2);display:block}
.b-head strong{font-size:1.52em;line-height:1.14;text-align:right;font-weight:700}
.sheet-b .para{font-size:.92em;margin-bottom:1.1em;color:#333}
.sheet-b .t{border:1px solid rgba(17,20,24,.28);margin-bottom:1em}
.sheet-b .band{padding:.34em .5em;font-weight:700;border-bottom:1px solid rgba(17,20,24,.28)}
.sheet-b .rw{border-bottom:1px solid rgba(17,20,24,.1)}
.sheet-b .rw:last-child{border-bottom:0}

.cq-line{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;opacity:0;transition:opacity 150ms ease}
.cq-line path{fill:none;stroke:var(--violet-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.cq-line circle{fill:var(--violet-ink);transform-box:fill-box;transform-origin:center;transform:scale(0)}
.cq-line.on{opacity:1}
.cq-line.draw path{stroke-dashoffset:0;transition:stroke-dashoffset 720ms var(--ease)}
.cq-line.draw .s{transform:scale(1);transition:transform 240ms var(--ease)}
.cq-line.draw .e{transform:scale(1);transition:transform 260ms var(--ease) 520ms}

.note{position:absolute;left:50%;bottom:var(--note-bottom);transform:translateX(-50%);z-index:3;width:max-content;max-width:calc(100% - 2em);min-height:4.2em;display:flex;align-items:center;gap:.8em;padding:.8em 1.15em;background:#fff;border:1px solid rgba(17,20,24,.1);border-radius:1.2em;box-shadow:0 1.2em 2.4em -1.2em rgba(17,20,24,.34),0 .2em .6em rgba(17,20,24,.07);transition:opacity 220ms ease,transform 420ms var(--ease)}
.note.out{opacity:0;transform:translate(-50%,.7em)}
.note .ring{flex:none;width:.8em;height:.8em;border-radius:50%;background:var(--violet-ink)}
.note p{margin:0;font-size:max(1.38em,12px);line-height:1.25;font-weight:450;letter-spacing:-.008em;color:var(--ink)}
.note.final p{font-weight:500}
.no-anim,.no-anim *{transition:none!important}

@container cq (max-width:460px){
  .cq-stage{font-size:calc(100cqw / 46);height:50.1em;--win-w:20.2em;--x1:2em;--x2:23.8em;--win-top:9.2em;--win-h:29.4em;--st-top:6.4em;--seg-w:24em;--seg-h:4.7em;--seg-top:1.5em;--note-w:42em;--note-bottom:3.6em}
  .st>span{font-size:max(1.76em,12px)}
  .sheet{font-size:.82em}
  .sheet-b{font-size:.86em}
  .cq-pause{top:1.9em;right:1em}
}
@media (max-width:900px){
  .wf-row{grid-template-columns:minmax(0,1fr);gap:32px;padding:16px}
  .wf-copy{padding:12px 8px 0}
}
@media (prefers-reduced-motion:reduce){
  .cq-stage *,.cq-stage{transition-duration:.01ms!important;transition-delay:0ms!important}
}


/* Shared parts of the pictures */

.pic{position:absolute;inset:3.4em 4em 7.8em}
.pic-flow{display:grid;grid-template-columns:17.5em minmax(0,1fr);column-gap:5.4em;align-items:center}
.srcs{display:flex;flex-direction:column;gap:2.2em;min-width:0}
.chip{display:flex;align-items:center;gap:.7em;padding:1.05em 1.1em;background:#fff;border:1px solid rgba(17,20,24,.1);border-radius:1em;box-shadow:0 1em 2em -1.1em rgba(17,20,24,.24);transition:border-color 300ms ease,box-shadow 300ms ease}
.chip svg{flex:none;width:1.7em;height:1.7em;color:var(--ink-2);transition:color 300ms ease}
.chip span{font-size:max(1.26em,10px);font-weight:500;letter-spacing:-.012em;line-height:1.2;min-width:0}
.chip.on{border-color:rgba(124,58,237,.6)}
.chip.on svg{color:var(--violet-ink)}
.card{position:relative;min-width:0;background:#fff;border:1px solid rgba(17,20,24,.1);border-radius:1.3em;overflow:hidden;box-shadow:0 2.2em 3.8em -1.9em rgba(17,20,24,.3),0 .3em .9em -.4em rgba(17,20,24,.1)}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:1em 1.4em;background:#F5F6F8;border-bottom:1px solid #E8EAEE}
.card-h b{font-size:max(1.32em,11px);font-weight:500;letter-spacing:-.014em;white-space:nowrap}
.card-h small{font-size:max(1.08em,9.5px);color:var(--ink-2);white-space:nowrap}
.card-h svg{width:1.6em;height:1.6em;color:var(--ink-2)}
.tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.9em;align-items:center;padding:.84em 1.15em;border-bottom:1px solid #EFF0F3;font-size:max(1.2em,10px);line-height:1.3;color:var(--ink)}
.tr:last-child{border-bottom:0}
.tr .lb{color:var(--ink-2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.val{position:relative;justify-self:end;padding:.06em .32em;margin-right:-.32em;border-radius:.22em;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color 280ms ease,background-color 300ms ease,box-shadow 300ms ease}
.tr.on>.val,.tr.on>.stk .val,.val.on{font-weight:500;background:rgba(139,92,246,.16);box-shadow:inset 0 0 0 1px rgba(124,58,237,.55)}
.val.flag,.tr.on>.val.flag,.val.flag.on{padding:.1em .6em;margin-right:-.1em;border-radius:99em;background:rgba(139,92,246,.10);box-shadow:none;color:var(--violet-ink);font-weight:500}
.mw{justify-self:end;display:grid;place-items:center;transition:opacity 240ms ease,transform 380ms var(--ease)}
.tr .mk{width:1.28em;height:1.28em}
.tr .mk.df{background:var(--violet-ink)}
.tr-head{color:var(--ink-2);background:#fff;padding-block:.62em}
/* defects-r7: the header grid uses the cells' own font size, so its columns are the same width in pixels and the labels meet the number edge; only the label text is smaller */
.tr-head>span{font-size:max(.883em,9.5px)}
.tr-3{grid-template-columns:minmax(0,1fr) 6.6em 5.6em}
.tr-4{grid-template-columns:minmax(0,1fr) 5.4em 5.4em 1.5em}
.tr-3>span:nth-child(n+2),.tr-4>span:nth-child(n+2){justify-self:end;text-align:right}
.tr-st{grid-template-columns:minmax(0,1fr) auto;padding-block:.74em}
.stk{display:grid;gap:.14em;min-width:0}
.stk .lb{font-size:.86em}
.stk .val{justify-self:start;margin-left:-.32em;margin-right:0;white-space:normal}
.mail p{margin:0;padding:1em 1.2em 1.2em;font-size:max(1.24em,10px);line-height:1.55;color:var(--ink)}
.hl{padding:.04em .16em;margin:0 -.16em;border-radius:.2em;transition:background-color 300ms ease,box-shadow 300ms ease}
.hl.on{background:rgba(139,92,246,.18);box-shadow:inset 0 0 0 1px rgba(124,58,237,.55)}
.pic-tree{display:grid;justify-items:center;align-content:center;row-gap:3.6em;inset:3em 7em 7.8em}
.pic-tree .srcs{flex-direction:row;gap:3.4em}
.pic-tree .card{width:100%}
.pic-doc{display:grid;grid-template-columns:27em minmax(0,1fr);column-gap:3em;align-items:center;inset:3em 3.6em 7.4em}
.pic-doc .win{position:relative;left:auto;top:auto;width:auto;height:100%}
.pic-mail{grid-template-columns:23.5em minmax(0,1fr);column-gap:3.4em}
.pic-mail .chip{align-self:flex-start}
.bl.on{filter:none}
.rw.on .v{font-weight:600;color:var(--ink);background:rgba(139,92,246,.18);box-shadow:inset 0 0 0 1px rgba(124,58,237,.6)}

/* Waiting states, only while the animation runs: without script or with reduced motion everything is visible */
.armed .val[data-in]:not(.in){color:transparent;background:none;box-shadow:none}
.armed .val[data-in]:not(.in)::after{content:"";position:absolute;inset:.24em .32em;border-radius:.2em;background:#EDEFF3}
.armed .mw[data-in]:not(.in){opacity:0;transform:scale(.5)}
.cq-pause{z-index:4}
@media (hover:none){.cq-pause:not(:focus-visible){visibility:visible;opacity:.55}}

@container cq (max-width:460px){
  .cq-stage[data-rig]{height:auto;--note-bottom:1.6em}
  .cq-stage[data-rig] .pic{position:relative;inset:auto;display:block;padding:max(4.4em,34px) 2em 10em}
  .cq-stage[data-rig] .srcs{flex-direction:row;gap:.8em;margin-bottom:2.6em}
  .cq-stage[data-rig] .chip{flex:1 1 0;min-width:0;padding:.8em .7em}
  .cq-stage[data-rig] .chip svg{display:none}
  .cq-stage[data-rig] .chip span{font-size:max(1.1em,9.5px);text-align:center;width:100%}
  .cq-stage[data-rig] .pic-mail .srcs{flex-direction:column;gap:1.4em}
  .cq-stage[data-rig] .pic-mail .chip{flex:none;align-self:flex-end;width:19em}
  .cq-stage[data-rig] .pic-tree .srcs{width:100%}
  .cq-stage[data-rig] .pic-doc{display:grid;grid-template-columns:23em minmax(0,1fr);column-gap:1.4em;align-items:center;padding:max(4.4em,34px) 1.4em 10em}
  .pic-doc .win{height:34em}
  .tr{padding-inline:.8em;gap:.5em}
  .tr-3{grid-template-columns:minmax(0,1fr) 4.9em 4.2em}
  .tr-4{grid-template-columns:minmax(0,1fr) 4.4em 5.4em 1.3em}
  .card-narrow .card-h{padding:.8em}
}

/* Phone disclosure: only script-enabled pages collapse rows, including reduced motion. */
.wf-toggle{display:none}
@media (max-width:640px){
  #example .wf-rows,.wf-sec .wf-rows{gap:12px}
  .wf-row{gap:0;padding:12px;border-radius:24px;scroll-margin-top:92px;overflow-anchor:none}
  .wf-copy,.wf-top{display:contents}
  .wf-top>.wf-icon,html.wf-phone .wf-title{display:none}
  .wf-top h3{margin:0;scroll-margin-top:100px}
  html.wf-phone .wf-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:64px;padding:12px 6px;border:0;border-radius:12px;background:none;color:var(--text);font:450 19px/1.2 var(--font);letter-spacing:-.025em;text-align:left;cursor:pointer}
  .wf-toggle svg{flex:none;width:20px;height:20px;color:var(--text-2);transition:transform 160ms var(--ease)}
  .wf-toggle:focus-visible{outline:2px solid var(--violet-bright);outline-offset:2px}
  .wf-toggle:active{background:var(--box)}
  .wf-row[data-open="true"] .wf-toggle>svg{transform:rotate(180deg)}
  /* defects-r7: the row's icon, 20px, 12px left of the title; a closed row loses 8px of card padding top and bottom (12 to 4) */
  .wf-tl{display:flex;align-items:center;gap:12px;min-width:0}
  .wf-toggle .wf-ticon{transition:none}
  html.wf-phone .wf-row[data-open="false"]{padding-block:4px}
  html.wf-phone .wf-row[data-open="false"] .wf-top>p,html.wf-phone .wf-row[data-open="false"] .wf-top>.wf-link,html.wf-phone .wf-row[data-open="false"] .wf-team,html.wf-phone .wf-row[data-open="false"]>.cq{display:none}
  .wf-top>p{padding:4px 8px 20px;font-size:16px}
  .wf-team{margin:0 0 20px;padding:16px}
  .wf-row>.cq{margin:0}
  .wf-row .cq-pause{min-width:32px;min-height:32px}
}

/* Alternating rows, desktop only. The markup stays text first, so reading order, tab order and the phone list
   do not change; only the grid placement swaps. Rows 1, 3, 5, 7 keep the text left, rows 2, 4, 6 put the picture left.
   Both columns stay equal, so every picture keeps its size. */
@media (min-width:901px){
  .wf-rows>.wf-row:nth-child(even)>.wf-copy{grid-column:2;grid-row:1}
  .wf-rows>.wf-row:nth-child(even)>.cq{grid-column:1;grid-row:1}
  /* The caption chip sits 1.6em from the panel bottom in every picture. The compare picture inherited 3.6em from the
     narrow-panel rule, which put its chip higher than the other six between 901 and 1279 wide. */
  .cq-stage[data-compare]{--note-bottom:1.6em}
}

/* Even rows on desktop: the text column sets each row's height, and the descriptions differ in length, so every row takes the
   tallest natural height for its width (measured 901 to 1920 with the link in place) and the picture sits in the middle of it. */
@media (min-width:901px){.wf-row{min-height:530px}.wf-row>.cq{align-self:center}}
@media (min-width:1100px){.wf-row{min-height:490px}}

/* The team box hugs its text: padding, heading and lines, no empty lower half. */
@media (min-width:901px){.wf-team{flex:none;padding:20px 24px}.wf-copy{gap:32px}}

/* Fill the white panel. The wide picture only, from 461 px of panel; the phone list keeps its own rules above. Every size is
   still in em, so type stays crisp and the connector, measured from the real boxes, stays true. The two rigs with windows
   (Comparing quotes, Checking policies) already fill their panels and are left alone. */
@container cq (min-width:461px){
  .pic{inset:2.8em 4em 7.6em}
  .pic-flow{column-gap:3.6em}
  .pic-mail{grid-template-columns:23.5em minmax(0,1fr);column-gap:3.4em}
  .pic-flow .srcs{gap:2.8em}
  .pic-mail .srcs{gap:2.2em}
  .pic-tree{inset:2.8em 5em 7.6em;row-gap:2.8em}
  .cq-stage[data-rig="renew"] .pic>.card{font-size:1.2em}
  .cq-stage[data-rig="change"] .pic>.card{font-size:1.1em}
  .cq-stage[data-rig="change"] .tr{padding-block:1.4em}
  .cq-stage[data-rig="change"] .mail{font-size:1.1em}
  .cq-stage[data-rig="claim"] .pic>.card{font-size:1.16em}
  .cq-stage[data-rig="claim"] .tr{padding-block:1.02em}
  .cq-stage[data-rig="schedule"] .pic>.card{font-size:1.06em}
  .cq-stage[data-rig="schedule"] .tr:not(.tr-head){padding-block:1.5em}
  .cq-stage[data-rig="statement"] .pic>.card{font-size:1.1em}
}

/* The quiet link under each description. Colour, hover and focus come from the footer's link rule (components/ui/footer.css);
   this adds only the faint underline that marks it as a link without a hover, and its place in the row. */
.wf-link{justify-self:start;margin-top:-8px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.28)}
@media (max-width:640px){.wf-top>.wf-link{margin:-12px 8px 12px}}